Skip to content

Instantly share code, notes, and snippets.

@DevShahidul

DevShahidul/Slick thumb function.html

Last active February 5, 2018 17:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DevShahidul/107c66274dca8805db135e9ec59538eb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DevShahidul/107c66274dca8805db135e9ec59538eb to your computer and use it in GitHub Desktop.
Download ZIP
Example see here >>> http://jsfiddle.net/Virtual/webyrb9d/ Another Example here >>> https://codepen.io/jatne/pen/qbYpKQ
Raw
Slick thumb function.html
<head>
<script>
$().ready(function (e) {
$('.slickslide').slick({
dots: true,
infinite: true,
speed: 500,
fade: false,
slide: 'li',
cssEase: 'linear',
centerMode: true,
slidesToShow: 1,
variableWidth: true,
autoplay: true,
autoplaySpeed: 4000,
responsive: [{
breakpoint: 800,
settings: {
arrows: false,
centerMode: false,
centerPadding: '40px',
variableWidth: false,
slidesToShow: 1,
dots: true
},
breakpoint: 1200,
settings: {
arrows: false,
centerMode: false,
centerPadding: '40px',
variableWidth: false,
slidesToShow: 1,
dots: true
}
}],
customPaging: function (slider, i) {
return '<button class="tab">' + $('.slick-thumbs li:nth-child(' + (i + 1) + ')').html() + '</button>';
}
});
</script>
</head>
<body>
<ul class="slickslide">
<li>
<img src="http://placehold.it/800x300/200&text=active" title="img" alt="img" />
</li>
<li>
<img src="http://placehold.it/800x300/300" title="img2" alt="img2" />
</li>
<li>
<img src="http://placehold.it/800x300/400" title="img" alt="img" />
</li>
<li>
<img src="http://placehold.it/800x300/500" title="img2" alt="img2" />
</li>
<li>
<img src="http://placehold.it/800x300/600" title="img" alt="img" />
</li>
</ul>
<div class="slick-thumbs">
<ul>
<li>
<img src="http://placehold.it/150x100/200" />
</li>
<li>
<img src="http://placehold.it/150x100/300" />
</li>
<li>
<img src="http://placehold.it/150x100/400" />
</li>
<li>
<img src="http://placehold.it/150x100/500" />
</li>
<li>
<img src="http://placehold.it/150x100/600" />
</li>
</ul>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment