在页面中初始化许多光滑的轮播答案

【问题标题】：initializing many slick carousels in page在页面中初始化许多光滑的轮播
【发布时间】：2018-11-13 20:12:00
【问题描述】：

我正在将光滑的轮播动态加载到页面中。我不知道每个轮播可用的幻灯片总数。硬编码它工作正常，但是，我希望它动态地将“slidesToShow”设置更改为最多 3。如果它是 2 或 1，我希望它返回 1。

我成功地使用循环来获取每个滑块，如下所示：

$(".carousel").each(function(index){
  //set each carousel/slider
  $(this).slick()....
})

我可以通过 init 获得每个滑块的总幻灯片数：

$(this).on("init", function(event, slick){
                    slidetoshowscroll = parseInt(slick.slideCount);
                    if(slidetoshowscroll > 3){
                        slidetoshowscroll = 3;
                    }
                    if(slidetoshowscroll < 3){
                        slidetoshowscroll = 1;
                    }
//shows the correct slide #s
                    console.log(slidetoshowscroll);

                })

这给了我 3,1,3 等...随着滑块的启动。

但是，我无法在滑块本身上设置动态“slidetoshowscroll”变量：

$(this).slick({
                    autoplay: false,
                    arrows: true,
                    infinite: false,
                    speed: 300,
                    slidesToShow: slidetoshowscroll,
                    slidesToScroll: 1
});

如何动态地让“slick”知道我必须为每个幻灯片放映多少张幻灯片？

【问题讨论】：

标签： jquery slick.js

【解决方案1】：

我建议在创建光滑轮播之前预先计算初始子项计数，以便从一开始就正确设置 slidesToShow 选项，如下所示：

$(".carousel").each(function(index){
    var childrenCount = this.childElementCount;
    var slidetoshowscroll;
    if(slidetoshowscroll > 3){
        slidetoshowscroll = 3;
    }
    if(slidetoshowscroll < 3){
        slidetoshowscroll = 1;
    }
    $(this).slick({
        ...
        slidesToShow: slidetoshowscroll,
    })....
})

但是，如果您坚持使用默认选项创建轮播，但您希望以后的计算基于 slick.slideCount（由于某种原因，可能与 childElementCount 不同），那么您可以修改 slick 选项使用slickSetOption，像这样：

$(this).on("init", function(event, slick){
    slidetoshowscroll = parseInt(slick.slideCount);
    if(slidetoshowscroll > 3){
        slidetoshowscroll = 3;
    }
    if(slidetoshowscroll < 3){
        slidetoshowscroll = 1;
    }
    slick.slick("slickSetOption", "slidesToShow", slidetoshowscroll, true);
})

【讨论】：