Slick Carousel - Nested Syncing Problem

Hi

I have created a nested Slick carousel using Slick - https://kenwheeler.github.io/slick/

Within each inner slide there are 3 slides that autoplays before move onto the next 3 set of slides.

To move between each group of inner slides I have a forward and next button.

The problem I am having is when you click on the main next arrow the slider dots become out of sync.

I have tried everything to get the carousels to sync whenever you interact with it but nothing works.

Here is the example - https://www.spaceoasis.tdf-dev.co.uk/

And here is the JS code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

<script>
(function($) {
$(function() {

//INNER SLIDER
$('.horizontal-slider').slick({
arrows: true,
dots: true,
infinite: true,
autoplay:true,
focusOnSelect:true,
autoplay: true,
fade: true,
cssEase: 'linear',
autoplaySpeed: 1700
}); 
});
	
}(jQuery));

$('button.slick-arrow').on('click', function (event) {
    $('.horizontal-slider').slick('slickGoTo', 0);

	});
</script>

<script>
(function($) {
$(function() {

$('.vertical-slider').slick({
arrows: true,
dots: true,
infinite: true,
autoplay:true,
slickGoTo: 0,
speed: 600,
accessibility: false,
autoplaySpeed: 6000
});
});
}(jQuery));
</script>

Its like I need to reset the inner slider (the one with dots) when a user clicks on the forward or back arrows. But no idea how to acheive this.

Hope someone can help me with this.

Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.