jquery - 光滑的滑块选项更改

Question

我想知道是否有任何方法可以将新选项传递给已经创建的 Slick 轮播？我有这个代码：

$('.bottom-slider').slick({
  asNavFor: '.top-slider',
  slidesToShow: 3,
  slidesToScroll: 1,
  variableWidth: true,
  centerMode: true,
  etc...
});

并且在某个时刻（添加了 CSS 类来重新设置滑块的样式）我想传递slidesToShow: 5给轮播。我试过了

$('.bottom-slider').slick({slidesToShow: 5}); 

但它不起作用。可能吗？我不想再次破坏/运行滑块或使用“重新设计”的轮播创建第二个框。

Answer 1

我发现网站slickSetOption上的描述有点混乱，所以在这里留下几个例子。

在不刷新 UI 的情况下设置单个选项：

$('.initialized-carousel').slick('slickSetOption', 'slidesToShow', 3);

通过 UI 刷新设置多个选项：

$('.initialized-carousel').slick('slickSetOption', {
   slidesToShow: 3,
   slidesToScroll: 1
}, true);

Answer 2

光滑的滑块提供slickSetOption了完全做到这一点的方法。

Answer 3

可能这肯定会帮助你。你必须在 slickSetOptionjQuery 的帮助下使用方法来完成它。将此查询粘贴到您的自定义 JS 文件中。

jQuery(window).load(function () {
  jQuery('.bottom-slider').slick('slickSetOption', 'slidesToShow', 5);
});