Slick: The time when "slick-active" class is being added is inconsistent across slides

Created on 18 Sep 2017 · 4Comments · Source: kenwheeler/slick

Currently:

If the next slide is a cloned slide, "slick-active" class is being added _after_ animation ends.
If the next slide is not a cloned slide, "slick-active" class is being added _before_ animation starts.

The second behavior is supposed to be the correct one.

This issue can cause visual inconsistency when we need to use "slick-active" class to implement some CSS transitions.

Source

ianthedev

👍6

Most helpful comment

If the next slide is a cloned slide, "slick-active" class is being added _after_ animation ends.

It's not quite right.
The class is also added before the animation begins, but it's added to the non-cloned slide.

The problem is live!

FajeSu on 18 Sep 2017

👍2

All 4 comments

If the next slide is a cloned slide, "slick-active" class is being added _after_ animation ends.

It's not quite right.
The class is also added before the animation begins, but it's added to the non-cloned slide.

The problem is live!

FajeSu on 18 Sep 2017

👍2

$('.sliderella').on('beforeChange', function(event, slick, currentSlide, nextSlide) { $('.slick-slide').removeClass('slick-quick'); $('.slick-active').next().addClass('slick-quick'); });

Then use the .slick-quick class in your CSS transitions. A _quick fix_, until this issue gets some attention.