Question

我想知道是否有办法将新选项传递给已创建的Slick轮播？我有这段代码：

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

并且在某个时刻（将CSS类添加到restyle滑块）我想将slidesToShow: 5传递给carousel。我试过

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

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

Answer 1

光滑滑块提供了slickSetOption方法来完成这一过程。

Answer 2

我发现website上对slickSetOption的描述有些混乱，因此在此留下几个示例。

设置单个选项而无需刷新UI

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

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

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

Answer 3

这肯定会对您有所帮助。您必须在jQuery的帮助下使用slickSetOption方法进行操作。将此查询粘贴到您的自定义JS文件中。

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

光滑的滑块选项会发生变化

3 个答案: