同一页面上具有相同类别的多个光滑滑块？

Question

我正在将Slick js用于页面上的某些轮播。每个轮播都有缩略图导航。一切都很好，但我的问题是，我希望页面上的多个轮播中有一个以上具有相同的类名。这有可能吗，我尝试对轮播进行迭代，但后来又打破了。我可以为每个轮播设置多个版本的平滑轮播，但是想知道是否有一种方法可以为每个轮播使用相同的类而不会导致错误。

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>
jquery：

     $(function () {
        var $videoSlider = $('.video-slider');

        /*INIT*/
        if ($videoSlider.length) {
          $('.slider-for').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            draggable: false,
            fade: true,
            asNavFor: '.slider-nav'
          });

          $('.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
                }
              }
            ]
          });
});

我正在将Slick js用于页面上的某些轮播。每个轮播都有缩略图导航。一切正常，但我的问题是我希望页面上的多个旋转木马中不止一个具有相同类...

Answer 1

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