Question

我正在将光滑的轮播动态加载到页面中。我不知道每个轮播的可用幻灯片总数。硬编码可以正常工作，但是，我希望它动态地将“ 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
});

如何动态地使“滑动”知道每次幻灯片必须显示多少张幻灯片？

Answer 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不同），则可以修改使用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);
})

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

1 个答案: