Swiper 同一ページに複数のサムネイル付きスライダーを設置する方法

同一ページに、サムネイル付きスライダーを複数設置したいことはないでしょうか。
1つ1つのスライダーに異なるクラス名を指定すれば実現可能ですが、これだとJavaScriptの記述が多くなってしまいます。
今回はJavaScriptをシンプルで簡単なコードにした実装方法について紹介します。

サムネイル付きスライダーのサンプル

次のサムネイル付きスライダーのサンプルをご覧ください。
メインエリアのスライダーは左右の矢印でスライダーを操作することができます。またサムネイルをクリックすると、メインエリアの画像を切り替えることができます。

続いてサンプルのコードについて解説していきます。

HTMLの記述について

<div class="container js-swiper">
  <div class="swiper js-swiper-main">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <div class="swiper js-swiper-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
  </div>
</div>
<!-- container -->

<div class="container js-swiper">
  <div class="swiper js-swiper-main">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <div class="swiper js-swiper-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
  </div>
</div>
<!-- container -->

<div class="container js-swiper">
  <div class="swiper js-swiper-main">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <div class="swiper js-swiper-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
      <div class="swiper-slide"><img src="https://unsplash.it/1500/400" alt=""></div>
    </div>
  </div>
</div>
<!-- container -->

基本的なHTMLの記述方法は、Swiperの公式サイトに書いてある通りになります。

サムネイル付きのスライダーは、メインスライダーとサムネイルが連動するように、2つのスライダーをセットで設置する必要があります。
このセットにしたスライダーを「container」クラスで囲みます。

JavaScriptで操作するタグには「js-〇〇」というクラス名を付けています。
あとは同一ページにスライダーを複数設置するので、同じコードを複製します。

CSSの記述について

img{
  width: 100%;
  height: auto;
}
.container{
  margin: 0 0 20px;
}
/* 選択されているサムネイルを透過 */
.swiper-slide-thumb-active{
  opacity: .6;
}

CSSでは選択中のサムネイルに付与されるクラス「swiper-slide-thumb-active」に、透過するプロパティを設定してます。

JavaScriptの記述について

//要素を全て取得
const sliders = document.querySelectorAll('.js-swiper');

//繰り返し処理
sliders.forEach((slider) => {
  //要素を取得
  const thumbs = slider.querySelector('.js-swiper-thumbs'),
  main = slider.querySelector('.js-swiper-main');
  
  //サムネイルスライダー
  const swiperThumbs = new Swiper(thumbs, {
    loop: true,
    spaceBetween: 2,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
  });
  
  //メインイルスライダー
  const swiperMain = new Swiper(main, {
    loop: true,
    spaceBetween: 10,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    thumbs: {
      swiper: swiperThumbs,
    },
  });
});

重要なところだけ解説します。

const sliders = document.querySelectorAll(‘.js-swiper’);
メインスライダーとサムネイルを囲んでいる「js-swiper」を全て取得して「sliders」変数に格納します。

sliders.forEach((slider) => {});
「sliders」変数を「forEach」で要素の数だけ処理します。

const thumbs = slider.querySelector(‘.js-swiper-thumbs’),
main = slider.querySelector(‘.js-swiper-main’);
「forEach」内で、サムネイルの「js-swiper-thumbs」と、メインスライダーの「js-swiper-main」を変数に格納します。

あとは、メインスライダーとサムネイルの「new Swiper」に変数の値を割り当ててます。

スライダーのオプション設定に関しては、公式サイトに書いてある通りの記述なので、特に複雑なことはしておりません。
以上でサムネイル付きスライダーを同一ページに複数設置することができます。

まとめ

いかがだったでしょうか。
基本的なJavaScriptのメソッドを利用することで実装することができました。
よかったら試してみてください。