I'm trying to create a sliding gallery using Slick.js - look at the "Center Mode" part.

All in all the gallery functions correctly, however I have a small glitch: when I'm on the last element and scrolling to the first - I'm not getting a smooth transition, but rather a small jump of the first element.

I created a Codepen to demonstrate what I'm talking about:

I tried to modify any possible class or classes bination:

.slick-cloned, .slick-active etc...

But I'm still getting this jump. How can I fix it?

I'm trying to create a sliding gallery using Slick.js - look at the "Center Mode" part.

All in all the gallery functions correctly, however I have a small glitch: when I'm on the last element and scrolling to the first - I'm not getting a smooth transition, but rather a small jump of the first element.

I created a Codepen to demonstrate what I'm talking about: https://codepen.io/anon/pen/YLExjo

I tried to modify any possible class or classes bination:

.slick-cloned, .slick-active etc...

But I'm still getting this jump. How can I fix it?

• javascript
• jquery
• css
• slick.js

2 Answers 2

Slick has a somewhat strange behaviour regarding classes that it adds to or removes from elements "on the edges" of the slideshow. One approach to fix that problem is to add an event handler and fix the classes by yourself:

$('.your-selector').slick({
    // configuration
}).on('beforeChange', (event, slick, currentSlide, nextSlide) => {
    if (currentSlide !== nextSlide) {
        document.querySelectorAll('.slick-center + .slick-cloned').forEach((next) => {
            // timeout required or Slick will overwrite the classes
            setTimeout(() => next.classList.add('slick-current', 'slick-center'));
        });
    }
});

Essentially, it will enforce the next (or previous) element in the slideshow to actually have the slick-center class that you set the transition on.

See https://codepen.io/anon/pen/KRyXrG for a demo.

I know this question is old but I'm having the same issue, and didn't find. Anything that helped