I'm using Slick js for some carousels on a page. Each carousel has a thumbnail navigation. Everything works great but my issue is I want more than one of these carousels on a page with the same class names. Is this possible, I tried an iteration over the carousels but it was breaking them. I could just setup numerous versions of slick carousels for each carousel but wondering if there is a way to just use the same classes for each of them without causing bugs.

HTML: each carousel setup like this

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

I'm using Slick js for some carousels on a page. Each carousel has a thumbnail navigation. Everything works great but my issue is I want more than one of these carousels on a page with the same class names. Is this possible, I tried an iteration over the carousels but it was breaking them. I could just setup numerous versions of slick carousels for each carousel but wondering if there is a way to just use the same classes for each of them without causing bugs.

HTML: each carousel setup like this

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

• javascript
• jquery
• html
• slick.js

2 Answers 2

You can try something like this

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

I think you just have to modify your code to initialize each slider separately. But that should be consistent with keeping the same classes.

Assuming your .slider-nav-thumbnails is always going to immediately follow your .slider-for, this should work:

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