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