带有多个 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

推测您的 'dots-container' 选择器是一个 class 您在页面上有多次选择器，因此它会为每个轮播添加点到 class 的每个实例一次。

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

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

我不知道容器相对于轮播的位置，此代码段假定它是兄弟

带有多个 Slick 旋转木马的 appendDots

appendDots with multiple Slick carousels

javascript

jquery

slick.js