如何将缩略图添加到提及当前幻灯片的光滑滑块点上 [英] how to add thumbnails to dots of slick slider mentioning the current slide
问题描述
我目前正在研究一个需要滑块的新项目。我已经为我的一个项目实现了漂亮的JS。
现在我需要添加缩略图，这些缩略图会在我们将鼠标悬停在链接到滑块的点上时显示
例如，点击第一个拇指和滑块将前进到第一个幻灯片，....点击第三个幻灯片并滑动到第三个幻灯片。
HTML
< html>
< head>
< title>我的惊人网页< / title>
< link rel =stylesheettype =text / csshref =slick / slick.css/>
< link rel =stylesheettype =text / csshref =slick / style.css/>
< / head>
< body>
<！ - 这是滑块代码 - >
< div class =center>
< div>< img alt =slide 2src =images / img1.jpg>< / div>
< div>< img alt =slide 2src =images / img2.jpg>< / div>
< div>< img alt =slide 2src =images / img3.jpg>< / div>
< div>< img alt =slide 2src =images / img4.jpg>< / div>
< div>< img alt =slide 2src =images / img5.jpg>< / div>
< / div>
< script type =text / javascriptsrc =slick / jquery-1.11.0.min.js>< / script>
< script type =text / javascriptsrc =slick / jquery-migrate-1.2.1.min.js>< / script>
< script type =text / javascriptsrc =slick / slick.min.js>< / script>
< script type =text / javascript>
$（'。center'）。slick（{
centerMode：true，
centerPadding：'60px'，
slidesToShow：1，
dots ：！0，/ *它用于导航点* /
可拖动：！1，
响应：[
{
断点：768，
设置：{
arrow：false，
centerMode：true，
centerPadding：'40px'，
slidesToShow：1
}
}，
{
断点：480，
设置：{
箭头：假，
centerMode：true，
centerPadding：'40px'，
slidesToShow：1
}
}
]
}）;
< / script>
< / body>
< / html>
您可以用自定义缩略图代替点。您需要在某处添加缩略图（例如，在图像幻灯片封装中的隐藏div中。请参阅代码以供参考：
$（'。slideme'）。slick（{
dots：true，
customPaging：function（slider，i）{
//这个例子会渲染标签
return'< button class =tab>'+ $（slider。$ slides [i]）。find（'。slide-title'）。text（）+'< / button>';
}，
}）;
您还需要调整原生Slick pager css删除点并为缩略图添加更多空间和样式
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>
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:
$('.slideme').slick({
dots: true,
customPaging: function(slider, i) {
// this example would render "tabs" with titles
return '<button class="tab">' + $(slider.$slides[i]).find('.slide-title').text() + '</button>';
},
});
You would also need tweak up the native Slick pager css to remove dots and add more space and styles for your thumbnails
这篇关于如何将缩略图添加到提及当前幻灯片的光滑滑块点上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
