javascript 带有多个 Slick 轮播的 appendDots

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32269930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 15:03:12  来源:igfitidea点击:

appendDots with multiple Slick carousels

javascriptjqueryslick.js

提问by Seano

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

我有多个Slick轮播,而 appendDots 参数为每​​个轮播添加了太多导航点。

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

例如,如果我有 3 个 Slick 转盘,则每个转盘上会出现 3 组点,而不是每个点一组。

    $('.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 thiscarousel?

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

回答by DonutReply

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

我不知道容器相对于旋转木马的位置,这个片段假设它是一个兄弟