Slick Carousel - Nested Syncing Problem

[mumford1]

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