如何在 Slick.js 中创建带有图像预览的缩略图轮播？答案

【问题标题】：How to create thumbnail carousel with image previews in Slick.js?如何在 Slick.js 中创建带有图像预览的缩略图轮播？
【发布时间】：2016-09-19 07:12:34
【问题描述】：

我想在单击幻灯片中的缩略图后预览图像。它还在 Slick.js 中显示图像预览。你可以see more at here.

像这样：

当用户单击缩略图时，它将显示此图像预览。

我观看了 Slick 的所有演示，但没有找到任何这样的示例。

【问题讨论】：

标签： javascript slick.js

【解决方案1】：

您可以使用给定的滑块同步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
});

看起来像：

【讨论】：

太棒了。直到您发表评论，我才真正看到这一点。非常感谢。

【解决方案2】：

我使用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：

//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 美化：

/*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;
}

【讨论】：

如果幻灯片数量发生变化，而不是使用幻灯片同步，这是有道理的。