Slick Carousel jumps on switch from last to first element and backwards

[innergap]

We've created a carousel with slick and it's not performing smoothly for us. You can see the issue at: http://shudder.com. The top hero has a jump when you click the next button after the last element in the list.

Steps to reproduce the problem

1. go to http://shudder.com
2. click the hero till the end and again to the first slide

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

What is the expected behaviour?

No jump

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

What is observed behaviour?

jump

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

More Details

• Which browsers/versions does it happen on? All
• Which jQuery/Slick version are you using? Version: 1.6.0
• Did this work before? Never

[ankesh7]

@innergap I am facing the same issue on carousel. There is delay in adding class .slick-active from last slide to first slide of the carousel.

[b0c]

Having the same problem on carousel, anyone has a solution yet?

[ghost]

Can confirm this is still happening. Last slide pops into view.

[ahmedash95]

any solution for this problem ?

[Kieraano]

Been looking for a fix for this for a while!

[pete-willard]

+1

[nataliedeweerd]

For those looking for a solution, adding a CSS transition to your .slick-cloned state can help. Still an issue in the original code, but that can alleviate some issues.

[SventB]

In slick version 1.5.9 this problem doesn't exist.

[karamjeetsinghkst]

Hi, I also have this problem. is there any css and js fix for now?

[wutmikee]

Anyone figure out a fix? Running into same issue.

[zzap]

You might want to take a look at 1537 issue.

[SventB]

Why is #1537 related to this? This issue is still not fixed in newest version of slick.

[Codevz]

This issue still is not fixed, why?

It seems v1.6 works better for sliding from last to first slide, but it also have issue.

Is there any fix for v.1.9 ?

[bondardevelop]

the same problem https://codepen.io/bondardevelop/pen/ZjOEaZ

[Codevz]

https://github.com/kenwheeler/slick/issues/3419

[bondardevelop]

OMG, I tried everything, nothing help((

[SventB]

Issue still occuring with version 1.9.0 I'm still using slick version 1.5.9 where this problem doesn't exist.

[izukingz]

I just encountered this issue now and had to brute force a fix. My current setup uses autoscroll and no arrows. after initializing my slick element, i added below.

$('.slick-class').on('afterChange', function(event, slick, currentSlide){ if(currentSlide == count){ $('.slick-class').slick('slickPause'); setTimeout(function(){ $('.slick-class').slick('slickGoTo',0); $('.slick-class').slick('slickPlay'); },autoplaySpeed); } });

[yokomele]

I've been having the same problem on carousel, ButI finally could fix it by adding below to my style sheet.

.slick-slider div { transition: none; }

[djpeach]

I've been having the same problem on carousel, ButI finally could fix it by adding below to my style sheet.

.slick-slider div { transition: none; }

This worked for me, thank you

[jamespotz]

I've been having the same problem on carousel, ButI finally could fix it by adding below to my style sheet.

.slick-slider div { transition: none; }

This worked. thank you

[nimajnebp]

I've been having the same problem on carousel, ButI finally could fix it by adding below to my style sheet.

.slick-slider div { transition: none; }

Works! (drupal 8 slick module)

[kozlowskam]

Nothing works for me. Also checked https://github.com/kenwheeler/slick/issues/3419.

my initial slider options: slickOptions = { dots: false, arrows: false, speed: 1500, autoplay: true, infinite: true, autoplaySpeed: 0, cssEase: 'linear', slidesToShow: 1.2, slidesToScroll: 0.1, pauseOnHover: true, pauseOnFocus: false, lazyLoad: 'ondemand', responsive: [{ breakpoint: 600, settings: { autoplay: false, slidesToShow: 1, slidesToScroll: 1, centerMode: true, } }] } and on click: function stopAutoplay() { $(slider).slick('slickSetOption', { autoplay: false, infinite: true, cssEase: 'cubic-bezier(0.5,0,0,1)', slidesToShow: 1.5, slidesToScroll: 1, focusOnSelect: false, }, true); }; which cause jumping from last slide to first.

[yokomele]

Hi, kozlowskam. Have you tried this?

.slick-slider div { transition: none; }

Add this to the end of your style sheet. And your style sheet must be loaded after all other style sheets.

[kozlowskam]

Hello! yes I did. There is a white space instead of 1st slide after last one and it glitches when dragging.

[samadiftikhar770]

hello i have 3 slides in slider and i am showing 3 slides at same time on my page. i want when i click 3rd slide it move at position of 1st slide . is that possible i am showing all slides on my page.

[smity81435]

I've tried adding the transition: none; with no luck. Is there another workaround for this?

[EzraElad]

I've been having the same problem on carousel, ButI finally could fix it by adding below to my style sheet.

.slick-slider div { transition: none; }

Perfect helped a lot ! I have a little something extra to add That's may be obvious but if you got speed in the settings make sure that its on 0 speed: 0, =]

[akhzarjaved]

I've been having the same problem on carousel, ButI finally could fix it by adding below to my style sheet.

.slick-slider div { transition: none; }

Worked !! Thanks alot man

[woakley]

Hello! yes I did. There is a white space instead of 1st slide after last one and it glitches when dragging.

I had this and there seemed to be a blank slide added in, not sure how. Adding the 'slide' setting to ensure only the slides I intended were added fixed the issue.