Going from first to last slide, or from last to first slide, on infinite mode doesn't animate

Hey there. In my solution, I wanted the next/previous slides to have a scale of 75%, and the centered one with 100% scale.

I’m using the following settings:

$('#slick-carousel').slick({
        autoplay: true,
        arrows: false,
        centerMode: true,
        dots: true,
        slidesToShow: 1,
        centerPadding: '295px',
        infinite: true
});

In my CSS I have the following:

#slick-carousel .slick-slide.slick-active.slick-center {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
}
#slick-carousel .slick-slide {
        -webkit-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -o-transform: scale(0.75);
        transform: scale(0.75);
        -webkit-transition: all .3s linear;
        -o-transition: all .3s linear;
        transition: all .3s linear;
}

It works great, unless when I slide from last to first slide, or from the first to last slide. Any thoughts on that? I’d appreciate any help.

Thanks in advance.

[bbodien]

This doesn’t seem to be fixed in 1.6.0 yet.

As @nickmelville described, when transitioning from the first or last slide to the cloned one on an infinite Slick slider, the slick-active class isn’t applied to the clone.

It feels wrong having to resort to centerMode: true to work around the problem.

[chrisandrewcl]

First, thanks @kenwheeler for this awesome piece of work!

For those of you who are still facing this issue in the 1.8.0 version, I was able to get rid of it by downgrading to 1.6.0.