appendDots with multiple Slick carousels

Question

I have multiple Slick carousels and the appendDots parameter is adding too many navigation dots to each carousel.

e.g. if I have 3 Slick carousels, 3 sets of dots are appearing on each carousel, instead of one set for each.

    $('.carousel').each(function() {
        $(this).slick({
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            dots: true,
            appendDots:'dots-container'
        });
    })

Any idea how to limit the appendDots parameter to just this carousel?

Answer 1

Presumeably your 'dots-container' selector is a class you have multiple times on the page so it's adding the dots to each instance of that class once for each carousel.

Instead of using the same global selector for each carousel make it relative to each instance of the carousel

$('.carousel').each(function() {
        $(this).slick({
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            dots: true,
            appendDots:$(this).siblings('dots-container')
        });
    })

I don't know where the container is relative to the carousel, this snippet assumes it's a sibling