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

Question

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

像这样:

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

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

Answer 1

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

它看起来像: