$(".thumb-item").slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
});
$('.thumb-item-nav').slick({
infinite: true,
slidesToShow: 6,
slidesToScroll: 1,
variableWidth: true,
asNavFor: '.thumb-item',
focusOnSelect: true,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 4,
dots:false
}
}]
});
<div id="slider">
<ul class="slider thumb-item">
<li><img class="img-responsive" src="images/slide1.jpg" /></li>
<li><img class="img-responsive" src="images/slide2.jpg" /></li>
<li><img class="img-responsive" src="images/slide3.jpg" /></li>
<li><img class="img-responsive" src="images/slide4.jpg" /></li>
<li><img class="img-responsive" src="images/slide5.jpg" /></li>
<li><img class="img-responsive" src="images/slide6.jpg" /></li>
<li><img class="img-responsive" src="images/slide7.jpg" /></li>
<li><img class="img-responsive" src="images/slide8.jpg" /></li>
<li><img class="img-responsive" src="images/slide9.jpg" /></li>
<li><img class="img-responsive" src="images/slide10.jpg" /></li>
</ul>
<ul class="slider thumb-item-nav">
<li><img class="img-responsive" src="images/slide1.jpg" /></li>
<li><img class="img-responsive" src="images/slide2.jpg" /></li>
<li><img class="img-responsive" src="images/slide3.jpg" /></li>
<li><img class="img-responsive" src="images/slide4.jpg" /></li>
<li><img class="img-responsive" src="images/slide5.jpg" /></li>
<li><img class="img-responsive" src="images/slide6.jpg" /></li>
<li><img class="img-responsive" src="images/slide7.jpg" /></li>
<li><img class="img-responsive" src="images/slide8.jpg" /></li>
<li><img class="img-responsive" src="images/slide9.jpg" /></li>
<li><img class="img-responsive" src="images/slide10.jpg" /></li>
</ul>
</div>
