Javascript 如何在 Slick.js 中创建带有图像预览的缩略图轮播？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39567327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create thumbnail carousel with image previews in Slick.js?
提问by vanloc
I want to preview image after the click to a thumbnail in a slideshow. It also appears image previews in Slick.js. You can see more at here.
我想在单击幻灯片中的缩略图后预览图像。它还在 Slick.js 中显示图像预览。你可以在这里看到更多。
Like this:
像这样：
When a user clicks a thumbnail it will show this image preview.
当用户单击缩略图时，它将显示此图像预览。
I watch all demo of Slick but not found any example like this.
我观看了 Slick 的所有演示，但没有找到任何这样的示例。
回答by Pravesh Agrawal
You can use Slider Syncing as given here
您可以使用此处给出的滑块同步
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
It looks like:
看起来像：
回答by Fandi Susanto
I use jQuery index()plus Slick slickGoTo method.
Fiddle at: https://jsfiddle.net/beluluk/uh8bpokb/
我用jQuery index()加号Slick slickGoTo method。小提琴：https: //jsfiddle.net/beluluk/uh8bpokb/
Html:
网址：
<div class='slider'>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
</div>
<div class='slider-nav'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
JS:
JS：
//Slick slider initialize
$('.slider').slick({
arrows:false, dots: false, infinite:true, speed:500,
autoplay:true, autoplaySpeed: 3000, slidesToShow:1, slidesToScroll:1
});
//On click of slider-nav childern,
//Slick slider navigate to the respective index.
$('.slider-nav > div').click(function() {
$('.slider').slick('slickGoTo',$(this).index());
})
CSS Beautification:
CSS 美化：
/*Slider*/
.slider > div {
display:block; width:100%; padding: 50px 0;
background: #FF0;
text-align: center; font-size: 2em;
}
/* Navigation */
.slider-nav { text-align: center; }
.slider-nav > div {
display:inline-block;
width:30px; height: 30px; margin: 0 5px; padding: 3px 0;
text-align: center; font-size:2em;
background: #FC0; cursor: pointer;
}
