Slick Slider如何更改选项？

Question

我遇到了Slick Slider的问题。 我想在每张幻灯片上更改'slidesToShow'选项。 每个滑块页面代表一个组，只有正确的元素应显示在该页面上。 每张幻灯片都有一个数据组属性，我用它来计算元素并将其传递给'slickSetOption'。

https://jsfiddle.net/xnnm645x/3/

$('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { 
   checkSlideToShow(nextSlide);
});

为什么滑块的第二页还有4个元素而不是3？

如果你滚动到最后一个滑块页面，你可以看到它如何改变div的宽度，突然变成3个幻灯片。是否有可能摆脱这种过渡效应？

Answer 1

您的代码无效，因为光滑会在.slider元素中为其功能注入2个div。

你可以通过登录控制台来检查它

console.log($('.slider div')) // count will be 11 and it will break your logic.

您只需要找到带数据属性的div。

$('.slider div *[data-group]') // count will be 9

工作示例：https://jsfiddle.net/fydo8pt3/