Slick: Second Carousel not synced with first carousel when autoplay enabled

[ariona]

Here is the code i have

var heroCarousel = $(".hero-carousel");
var heroThumb = $(".carousel-thumb");
heroCarousel.slick({
    autoplay: true,
    autoplaySpeed: 5000,
    slidesToShow: 1,
    slideToScroll: 1,
    arrows: false,
    asNavFor: '.carousel-thumb',

});
heroThumb.slick({
    slidesToShow: 5,
    slidesToScroll:1,
    asNavFor:'.hero-carousel',
    focusOnSelect: true,
    arrows: false
});

The first carousel have autoPlay prop enabled, but when it's updated the second slider is not updated, it still in the first position.

[ariona]

Well, this need more workaround using afterChange event

heroCarousel.on("afterChange",function(event, slick, currentSlide){
    // Remove current class from second slider
    heroThumb.find(".slick-current").removeClass("slick-current");

    // Add current class to the current slide
    heroThumb.find(".slick-slide").eq(currentSlide).addClass("slick-current");
});

This solve the problem for now, but it's great to be implemented natively on the slick core.

[jdahdah]

FWIW, I don't have autoplay activated, yet I still have this issue. I'm not sure if it's supposed to be default behavior, but it's kind of how I would expect it to work from a usability standpoint. Thanks for the code, it solves my issue for now.

[simeydotme]

Please provide a reduced test-case with a JSFiddle for investigation :)

[ariona]

@simeydotme here is my fiddle, https://jsfiddle.net/Ly871fh9/

[simeydotme]

related to #1892

[simeydotme]

thanks, @ariona .. I'll try to take a look at this soon :)

[thebucknerlife]

Any updates on this? We're having the same issue.

[ptrwllrd]

I too have encountered this problem. Thanks for the workaround @ariona!

[kien-huynh]

This happens when the slides infinite property is true, just set infinite: false. But how if I want to make the syncing sliders infinite? Thanks for trying.

[brandensilva]

To go along with this it really would be good to just have a "sync: true" option. I understand not everyone may want this functionality so the option would help alleviate that. But I imagine the common use case is if you are tying two slides together you want them to synchronize.

When the main slide autoplays or the arrows are clicked, the carousel should reflect the new current state of the slide. Equally the carousel when clicking on a new slide image, you will see the main slide reflect as well.

Where things get tricky is if they are both autoplay, so really you have to favor one of the other. I'd favor the first defined slider but whatever works at making it obvious.