Slick: Animation issues when going from last to first item.

[raphaelparent]

When I try to animate the slide transition with some opacity, everything works fine except when I go forward from last to first element. Even when I go backward from first to last it works fine.

.gif of the issue

The gif is a bit more glitchy than the actual result but we can clearly see that when going from slide "4" to "1" the animation skips. But not when going from slide "1" to "4".

[ https://jsfiddle.net/b5bqk68j/6741/ ]

====================================================================

Steps to reproduce the problem

1. Initialize a slick slider with the following config
   let sliderConfig = { centerMode: true, centerPadding: '400px', infinite: true, slidesToShow: 1, prevArrow: $prevArrow, nextArrow: $nextArrow };

2. Add transition to slide or element in the slide.
   in my case:

   .slick-animate {
       opacity: 0.5;
       transition: opacity 0.48s ease-in-out;
   }
   .slick-center {
       .slick-animate {
          opacity: 1;
      }
   }
   

3. Use any means of going forward through the slides and see the effect.

====================================================================

What is the expected behaviour?

Every slides animates properly (like when going backwards).

====================================================================

What is observed behaviour?

When going from last to first the animation is glitching. (probably because of the slide cloning/switching)

====================================================================

[explorador]

I had this same issue. I ended up replacing https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L2357

with .eq( _.options.slidesToShow + _.slideCount + 1 )

[raphaelparent]

Thanks for answering. 😄

Unfortunately I just tried switching out that line but it doesn't seem to change the end results.

I made sure the proper version of the file was loaded and not a cached version but nothing.

[explorador]

I updated the code, maybe you used my previous one. Let me know if it works

[raphaelparent]

Oh nice that did fix it! Thank you 👍

[pjfsilva]

This should be reopened so it's fixed in the library itself. maybe @explorador can send a PR for this?

[alex88]

I see the same behavior again, does anyone have the same issue?

I've applied:

    .slick-slide
      img
        transition: all 0.5s
    .slick-center
      img
        transform: scale(1.8)

and I see the transition ok in all slides except when it restarts from the beginning, the whole sliding animation works fine but the scale is applied only on animation end