Slick carousel animation blinking after the last slide / cloned slide in infinite looping

Slick is a great touch responsive carousel. From time to time you might have issues with it and one of them is when you have the carousel set as infinite and some CSS transitions on the active slide. The CSS3 animation doesn’t apply and users experience a blink.

One way to avoid the bug animation at the end of infinite rotation transition

Adding a delay on the transition help. A CSS transition-delay of the same duration as the slide speed (default value 300ms) on the slide. Check the documentation at http://kenwheeler.github.io/slick/

It will let the slide move into the final position and then play the CSS animation of your choice. This way it seems we don’t have the broken animation on the last/cloned slide.

// example
transition: transform 500ms ease-in-out;
transform: scale(0.6);
transition-delay: 300ms;


It’s not the fix you might want but it’s better than the jump/blink user can experience.

Hope that can help some dev getting crazy about that bug.

See also the git issue at: https://github.com/kenwheeler/slick/issues/1890