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

Question

我正在为页面上的一些轮播使用 Slick js。每个轮播都有一个缩略图导航。一切都很好，但我的问题是我想要一个页面上有多个具有相同 class 名称的轮播。这可能吗，我尝试对轮播进行迭代，但它正在破坏它们。我可以为每个旋转木马设置多个版本的光滑旋转木马，但想知道是否有一种方法可以为每个旋转木马使用相同的 classes 而不会导致错误。

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
                }
              }
            ]
          });
});

Answer 1

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

一致

假设您的 .slider-nav-thumbnails 总是紧跟在您的 .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
                    }
                }
            ]
        });
    });
});

Answer 2

你可以试试这样的

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

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

Multiple Slick Sliders On Same Page with same classes?

html

javascript

jquery

slick.js

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

Multiple Slick Sliders On Same Page with same classes?

html

javascript

jquery

slick.js

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