Animation issues when going from last to first item.

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)

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

[eleven59]

Don’t know why this is closed since the issue is still here in the latest version. I fixed it in my project by applying a custom class “.slick-target” to the slide that slick is transitioning to (so next or prev slide depending on direction) and then applying CSS to both “.slick-target” and “.slick-current” simultaneously. No delay, just smooth transitions all around.

So JS:

// Init slider
let slider = $('.container').slick({'infinite': true});

// Add custom class to next or previous slide depending on change direction
slider.on('beforeChange', (event, slick, currentSlide, nextSlide) => {
    let nextIndex = currentSlide + 1; // assume moving right
    if(currentSlide-1 == nextSlide || (nextSlide+1 == slick.slideCount && currentSlide < nextSlide)) {
        nextIndex = currentSlide - 1; // nope, moving left
    }
    $(`[data-slick-index="${nextIndex}"]`).addClass('slick-target');
});

// clear custom class after transition
slider.on('afterChange', () => {
    $('.slick-slide').removeClass('slick-target');
});

And CSS:

/* Not current slide */
.slide {
    transform: scale(.8);
    transition: .5s all;
}

/* Current slide */
.slick-current .slide,
.slick-target .slide {
    transform: scale(1);
}

The detection in my JS code of whether we’re moving left or right only works for 3+ slides I think, because that was all I needed, but you could change that line to be much much longer if you need to detect this. See #1679.

[pjfsilva]

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