CSS transition from last slide to first doesn't work

[DriftingSteps]

CSS transition from the last slide to the first (or vice versa) doesn't seem to work. I've had this issue multiple times so my assumption was that maybe I made an error. But I've tried a few slick.js settings and none seem to help. Codepen link below -

https://codepen.io/anon/pen/RxPYeK

Steps to reproduce the problem

1. Click the 'next' icon on the till you reach the 'slide4' block. As you slide from 'slide1' to 'slide4', you will see a smooth CSS-based transition that changes opacity and transformation. But sliding to 'slide1' from 'slide4' negates the transition animation.
2. Clicking back to 'slide4' from 'slide1' also negates the animation.

Is this is a known bug? What are the possible solutions to this?

[kangabell]

@DriftingSteps I believe this is related to a couple other existing issues: https://github.com/kenwheeler/slick/issues/3124 https://github.com/kenwheeler/slick/issues/3174

[morgant]

I am seeing this issue as well.

[PaulBarrett79]

I've experienced this bug too.

I saw on another forum somewhere that if you're using the center mode you can target your animation on slick-center rather than slick-current. If you change the pen on the first comment to target this, the 'jerk' disappears.

However!

If you have double or more slides than the slides to show parameter, even using this class does not remove the jerky animation. I have forked the original pen here to show what I mean

https://codepen.io/PaulBarrett79/pen/NXmMbY

I've added 7 slides instead of 4 and the behaviour returns. This might be of use to someone.

EDIT also, if you have 5 items and 3 to show, you can see the 2nd slide doesn't have the scale down immediately. Weird.

https://codepen.io/PaulBarrett79/pen/aExKeq

[PaulBarrett79]

I think this pull request fixes this issue

https://github.com/kenwheeler/slick/pull/3307

[kirkbross]

This was ages ago, but I manually added your 'enhanced eq' fix didn't fix it. I still get funky center slide behavior when going from the first to last slide, or vice versa. I have custom styling on the slick-center slick-current but list position shifts and the 1st slide is off the screen.

[kirkbross]

Here's a fiddle. Go from slide 12 to 1, or 1 to 12...

http://jsfiddle.net/kirkbross/mykcdjt4/

[febLey]

I'm encountering the same. Curiosly this does not happen on the slick.js website in center mode example.

[sgClaudia98]

Is this issue fixed?, I still have the same bug

[javednoor]

@PaulBarrett79 - How to do this update on react slick slider