slick.js - 如何将垂直和水平光滑滑块连接在一起

Question

我必须将两个滑​​块加入一个滑块（缩略图和大预览）。在移动断点处，缩略图必须是水平方向，而对于桌面，缩略图必须是垂直方向。

大预览的初始化

$('.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: false,
  infinite: false,
  focusOnSelect: true,
  arrows: false,
  adaptiveHeight: true,
  vertical: false,
  verticalSwiping: false,
  responsive: [
    {
      breakpoint: 992,
      settings: {
        vertical: true,
        verticalSwiping: true,
      }
    },
  ],
});

例如，滑块预览

移动的

桌面

标签： slick.js