javascript - 带有多个 Slick 旋转木马的 appendDots

Question

我有多个 Slick轮播和 appendDots 参数向每个轮播添加了太多导航点。

例如如果我有 3 个 Slick 旋转木马，则每个旋转木马上会出现 3 组点，而不是每个点一组。

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

知道如何将 appendDots 参数限制为仅this 轮播吗？

Answer 1

大概您的“点容器”选择器是您在页面上多次使用的类，因此它会为每个轮播向该类的每个实例添加一次点。

与其对每个轮播使用相同的全局选择器，不如使其相对于轮播的每个实例

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

我不知道容器相对于轮播的位置，这个片段假设它是兄弟