Как добавить эффект появления новых и исчезания старых элементов слайдера?

Question

[Фёдор]

1. Нужно задавать слайдам при появлении красный цвет
2. Нужно задавать слайдам при исчезании синий цвет
Вот наработка на codepen:
https://codepen.io/FedorT/pen/wOapyy
Вроде бы нужный callback прицепил, а вот с эффектом застрял.

Comments

[Виталий Киренков]

То есть, все кроме активного синие, верно? Или как вы себе представляете элементы, которые ещё не были активными, особенно при бесконечной ротации

[Фёдор]

Извиняюсь, поплыл. Запутал своим вопросом))
Постараюсь поточнее объяснить.
Прозрачность забываем. С цветами просто нагляднее.
Слайд, по умолчанию синий, появляется справа, становится красным, доходит до левого края, становится синим.
При этом следующий слайд, который появляется вскоре после красного тоже становится красным.
Получается, что все активные слайды (slidesToShow: 3), т.е. 3, красные. Остальные синие.

Ротация бесконечна, общее количество слайдов может быть любым. Активных слайда всего 3.

[Виталий Киренков]

А видимых сколько?

[Фёдор]

Кол-во видимых выходит меняется в зависимости от настроек responsive.

[Фёдор]

https://codepen.io/FedorT/pen/KEpBZm
Вот, получилось! Только баг со стартом остался)

Answer 1

[Фёдор]

Попробовал, в этом случае всё работает. Спасибо!
https://codepen.io/FedorT/pen/wOajpp
Вообще думал о чем-то более универсальном, чтобы в зависимости от viewport менялось кол-во активных слайдов, параметр slidesToShow. Например, 10, 7, 4, 1. Вот тут и выходит засада.

Comments

[OVK2015]

https://owlcarousel2.github.io/OwlCarousel2/docs/s...
В плане основы, на гите поглядеть можете

[Фёдор]

OVK2015, попробовал с owl-carousel,
https://codepen.io/FedorT/pen/eXNbmL?editors=1111
что-то не заладилось.

[Фёдор]

в итоге решил поигравшись с атрибутом
[aria-hidden="true"]
[aria-hidden="false"]
и изменяющимся свойством transition-delay в зависимости от slick centeredMode

Answer 2

[Виталий Киренков]

Как мне кажется, тут достаточно всё просто.

.non-active { background-color: blue; }
.active { background-color: red; }

На методе onChange вы находите активный элемент, устанавливаете класс (.active) на него, на .prev и на .next, а со всех остальных скидываете класс