Slick.js - multiple carousels are not synchronized on autoplay

Question

i have created multiple carousels using Slick (https://kenwheeler.github.io/slick/) on single page. They all have the same class and setting (mainly autoplay infinite), but they change within diffrent time. I'm not able to synchronize them.

Gif with the problem: https://imgur.com/wFGpADi

I have even created example: https://jsfiddle.net/ou85zmqj

$(document).ready(function() {
  $('.slick').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    pauseOnHover: false
  });
});

.slick {
  margin: 0 auto;
  max-width: 200px;
}

Can i do something to keep them synchronized?

user_287476 · Answer

One solution is to set the first slideshow to autoplay and have it control the others by setting the asNavFor property. When the first slideshow changes, it will immediately change the other two.

The only problem with using this approach is that it requires the slideshows to have the same number of slides, otherwise it may not rotate through all the slides (if the controlling slideshow has fewer) or show the last slide more than once (if the controlling slideshow has more).

$(document).ready(function(){
  $('.slick1').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    pauseOnHover: false,
    asNavFor: '.slick2'
  });  
  $('.slick2').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    pauseOnHover: false
  });
});

.slick {
  margin: 0 auto;
  max-width: 200px;
}

Another solution is to have the first slideshow trigger the next slide of the other two slideshows, using the beforeChange event. This version will work no matter how many slides are in each slideshow.

$(document).ready(function(){
  $('.slick1').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    pauseOnHover: false
  });  
  $('.slick2').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    pauseOnHover: false
  });
  
  // First slideshow triggers the other two to change
  $('.slick1').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $('.slick2').slick('slickNext');
  });

});

.slick {
  margin: 0 auto;
  max-width: 200px;
}

Slick.js - multiple carousels are not synchronized on autoplay

1 Answers