В настоящее время я работаю над новым проектом, для которого нужен слайдер. Я применил slick JS для одного из моих проектов.
Теперь мне нужно добавить эскизы, которые будут отображаться, когда мы навешиваем точки, которые будут ссылаться на слайдер
Например, нажмите на первый палец и слайдер, чтобы перейти к первому слайду,... нажмите на третье и слайды на третий слайд.
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>