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

[miguelleite]

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.

[kenwheeler]

It is because of the cloned slide. I'm in the middle of a launch, I'll take a look when I get some bandwidth.

[miguelleite]

Thanks @kenwheeler. Will wait for it :)

[ponyfleisch]

Is this fixed? I have the same problem, but i can't reproduce on jsfiddle. demo on the demo site also works fine. (i'm using 1.3.15)

Edit: JSFiddle: http://jsfiddle.net/ettmrgcj/

[nickmelville]

Not a fix, but a workaround... targeting .slick-center for the transition/animation works if you have centerMode:true enabled:

http://jsfiddle.net/1wyegw6L/

The issue is that when it "wraps" around, it is showing the cloned item first, and then changing the translate value to show the original, without ever applying the slick-active class to the cloned item. slick-center does get applied to both though.

EDIT: ...aaaaaand now I see that this workaround had already been posted: https://github.com/kenwheeler/slick/issues/1720#issuecomment-141523915

[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.

[omzy]

+1. Any update on this?

[eugeneAamplify]

No luck from my side either :(

[aaronransley]

+1 running into this issue as well. Attempting to use centerMode: true, but even when targeting the .slick-center class, transition pops remain.

[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.

[prozhkov]

@chrisandrewcl Thanks a lot

[rbrlortie]

Still having the issue with centerMode. Any solution that doesn't require downgrading?

[tfadz]

Downgrading to 1.6.0 still doesn't fix it.

[y1n0]

I'm still facing this issue even after downgrading to 1.6, setting centerMode and targeting centered slide with .slick-center