Несколько скользящих слайдеров на одной странице с одинаковыми классами? - PullRequest
Новая
       9

Несколько скользящих слайдеров на одной странице с одинаковыми классами?

1 голос
/ 11 марта 2020

Я использую 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
                }
              }
            ]
          });
});

1 Ответ

1 голос
/ 11 марта 2020

Я думаю, вам просто нужно изменить код, чтобы инициализировать каждый слайдер отдельно. Но это должно соответствовать сохранению тех же классов.

Предполагая, что ваш .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
                    }
                }
            ]
        });
    });
});
...