Javascript 同一页面上有多个光滑的滑块，使用相同的类？

我在页面上使用Slick js进行一些旋转木马。每个旋转木马都有一个缩略图导航。一切都很好，但我的问题是，我希望在一个页面上有多个具有相同类名的旋转木马。这是可能的，我试着在旋转木马上迭代，但它破坏了它们。我可以为每个旋转木马设置许多版本的slick旋转木马，但我想知道是否有一种方法可以在不引起bug的情况下为每个旋转木马使用相同的类

HTML：每个旋转木马设置如下

<div class="video-slider slider-for">
    <!-- slide 1 -->
    <div>
        Slide One
    </div>
    <!-- end slide 1 -->
    <!-- slide 2 -->
    <div>
        Slide Two
    </div>
    <!-- end slide 2 -->
    <div>
        Slide Three
    </div>
</div>

<!-- Thumbnails -->
<div class="video-slider slider-nav slider-nav-thumbnails">
    <!-- slide one thumbnail -->
    <div class="video-carousel--thumbnail">
      Slide One Thumbnail
    </div>
    <!-- slide two thumbnail-->
    <div class="video-carousel--thumbnail">
        Slide Two Thumbnail
    </div>
    <div class="video-carousel--thumbnail">
        Slide Three Thumbnail
    </div>
</div>

$(document).ready(function() {
    var myCarousel = $(".slider-for:not(.slick-initialized)");
    myCarousel.each(function() {
        $(this).slick({});
    });
});

---

我认为你只需要修改你的代码来分别初始化每个滑块。但这应该与保持相同的类保持一致

假设您的

.slider导航缩略图总是紧跟着您的
.slider for
，这应该可以工作：

$(function () {
    $('.slider-for').each(function(num, elem) {
        elem = $(elem);
        elem.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            draggable: false,
            fade: true,
            asNavFor: '.slider-nav'
        });

        elem.next('.slider-nav-thumbnails').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: '.slider-for',
            dots: false,
            arrows: false,
            vertical: true,
            draggable: false,
            centerMode: false,
            focusOnSelect: true,
            responsive: [
                {
                    breakpoint: 769,
                    settings: {
                        vertical: false
                    }
                }
            ]
        });
    });
});

你可以试试这样的

<div class="video-slider slider-for">
    <!-- slide 1 -->
    <div>
        Slide One
    </div>
    <!-- end slide 1 -->
    <!-- slide 2 -->
    <div>
        Slide Two
    </div>
    <!-- end slide 2 -->
    <div>
        Slide Three
    </div>
</div>

<!-- Thumbnails -->
<div class="video-slider slider-nav slider-nav-thumbnails">
    <!-- slide one thumbnail -->
    <div class="video-carousel--thumbnail">
      Slide One Thumbnail
    </div>
    <!-- slide two thumbnail-->
    <div class="video-carousel--thumbnail">
        Slide Two Thumbnail
    </div>
    <div class="video-carousel--thumbnail">
        Slide Three Thumbnail
    </div>
</div>

$(document).ready(function() {
    var myCarousel = $(".slider-for:not(.slick-initialized)");
    myCarousel.each(function() {
        $(this).slick({});
    });
});

我尝试过这种方法，但似乎不起作用：（我的页面上有两个单独的滑块，但它们一起移动