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

Ваш код не работает, потому что slick будет вводить 2 div в ваш .slider элемент для его функциональности.

вы можете проверить это, войдя в консоль

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/