Second Carousel not synced with first carousel when autoplay enabled

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.

[pete-willard]

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

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