滑動滑塊如何更改選項？

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/