<div class="main">
<div class="slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="slider slider-nav">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="action">
<a href="#" data-slide="3">go to slide 3</a>
<a href="#" data-slide="4">go to slide 4</a>
<a href="#" data-slide="5">go to slide 5</a>
</div>
</div>
body{
background:#ccc;
}
.main {
font-family:Arial;
width:500px;
display:block;
margin:0 auto;
}
h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
.action{
display:block;
margin:100px auto;
width:100%;
text-align:center;
}
.action a {
display:inline-block;
padding:5px 10px;
background:#f30;
color:#fff;
text-decoration:none;
}
.action a:hover{
background:#000;
}
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});