I am currently working on a new project which required a slider. I have implemented slick JS for one of my project.
Now I need to add thumbnails which will appear when we hover the dots which will link to the slider
For example, click on first thumb and slider will advance to first slide,….click on third and slides to third slide.
HTML
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/style.css"/>
</head>
<body>
<!-- THis is the slider code -->
<div class="center">
<div><img alt="slide 2" src="images/img1.jpg"></div>
<div><img alt="slide 2" src="images/img2.jpg"></div>
<div><img alt="slide 2" src="images/img3.jpg"></div>
<div><img alt="slide 2" src="images/img4.jpg"></div>
<div><img alt="slide 2" src="images/img5.jpg"></div>
</div>
<script type="text/javascript" src="slick/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 1,
dots: !0, /* It is for the navigation dots */
draggable: !1,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
</script>
</body>
</html>
Best Answer
You may replace dots with custom thumbnails. You would need to add thumbnails somewhere (for example, in a hidden div inside the image slide wrapper. See the code for reference:
You would also need tweak up the native Slick pager css to remove dots and add more space and styles for your thumbnails