Как сделать добавление класса в момент перемещения слайда?

Question

[arctic07]

При нажатии Вправо. До момента перелистывания добавляется класс к слайду №2. И он переходит на позицию №1 слайда. В обратную сторону так же. Остальным слайдам должен убираться этот класс.


То есть, при перемещении слайда №1, который скрыт слева, на центральную позицию, слайду №2 удаляется класс и слайду №1 добавляется и он приезжает на центральную позицию уже с этим классом.

Я сделал изменение цвета для упрощения. В реале будет увеличиваться картинка и появляться блоки.
https://codepen.io/arcticmonkey07/pen/KKwWJMR
У меня получилось сделать добавление только в одну сторону...

Answer 1

[0xD34F]

.on('beforeChange', function(e, { slideCount: c }, curr, next) {
  const selector = shift => `[data-slick-index="${next + shift * c}"] .slide`;

  $('.slide.color', this).removeClass('color');
  $([ 0, 1, -1 ].map(selector).join(', '), this).addClass('color');
})

Comments

[arctic07]

Спасибо!!! огромейнейшее!!

[arctic07]

не могу только понять как это работает, если не сложно, можешь описать?

[0xD34F]

arctic07, для имитации бесконечной прокрутки slick добавляет копии слайдов - первых в конец, последних в начало. Поэтому класс надо добавлять не только слайду, к которому осуществляется прокрутка, но и к его копии - иначе пользователь не увидит эффекты порождаемые добавлением класса при переходе из конца в начало или из начала в конец. Как, зная индекс слайда, найти индекс его копии? - добавить/вычесть количество слайдов.