滑动滑块如何更改选项？

Question

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

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

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

为什么会出现滑动的第二页上，还是4个元素，而不是3？

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

Answer 1

您的代码不起作用，因为slick会在您的.slider元素中注入2个div来实现其功能。

您可以通过在控制台

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

记录检查它，你需要找到的分度数据唯一属性。

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

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