slickでサムネイル付きスライダーを複数設置したらサムネイルが同時に動いてしまう

更新2023/11/05

slick を使って1つのページにサムネイル付きのスライダーを複数設置した時に、それぞれのスライダーに同じクラスを当てると複数のスライドが同時に動いてしまいます。

1つ1つの組み合わせでクラスを変更すれば問題ないのですが、同じコードを書くのは面倒ですし、とある事情で1つのコードで実装したいということもあると思います。そんな場合に対処するためのメモです。

例えば以下のようなHTMLコードで複数のサムネイル付きのスライダーを作ります。

<!-- 一つ目のスライダー -->
  <div class="nav_slider_wrap">
    <div class="nav_slider">
      <div class="slide_item">スライド01</div>
      <div class="slide_item">スライド02</div>
      <div class="slide_item">スライド03</div>
    </div>
    <div class="nav_slider_thumb">
      <div class="">スライド01</div>
      <div class="">スライド02</div>
      <div class="">スライド03</div>
    </div>
  </div>
<!-- 二つ目のスライダー -->
  <div class="nav_slider_wrap">
    <div class="nav_slider">
      <div class="slide_item">スライド01</div>
      <div class="slide_item">スライド02</div>
      <div class="slide_item">スライド03</div>
    </div>
    <div class="nav_slider_thumb">
      <div class="">スライド01</div>
      <div class="">スライド02</div>
      <div class="">スライド03</div>
    </div>
  </div>

このようなコードの場合に一つしかスライダーを設置していない時と同様にコードを記述してしまうと、「一つ目のスライダー」をスライドさせると「二つ目のスライダー」のサムネイルも同時にスライドされてしまいます。

この時の解決策は、JSで動的にクラスに数字を追加することです。
HTMLでは同じコードを記述しても、それぞれのスライダーに別々のクラスがつくので個別に動くようになります。

  $('.nav_slider_wrap').each(function( i ) {
      var common_slide = $(this);
      //本体スライダー
      common_slide.find( '.nav_slider' ).addClass( 'nav_slider' + i ).slick({
        asNavFor: '.nav_slider_thumb' + i
      } );
      //サムネイルスライダー
      common_slide.find('.nav_slider_thumb').addClass( 'nav_slider_thumb' + i ).slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.nav_slider' + i,
        dots: true,
        centerMode: true,
        focusOnSelect: true,
      });
  });

関連記事

slick を使ったスライダーの作り方 | 基本とカスタマイズまとめ

カテゴリー : JavaScript

JavaScript関連の記事

TOPへ