Swiperでサムネイル付きのスライダーの実装方法

実装の考え方

スライダーライブラリとして1番使われているSwiperを使用して、サムネイル付きのスライダーの実装方法を紹介します。

サムネイルと連動させるには、親になるswiperを2つ用意して、メインのスライダーの方にthumbsをサムネイルになるスライダーに設定します。

バージョン情報

この記事で使用しているSwiperのライブラリのバージョンは以下の通りです。

検証環境のバージョン情報

Swiper
11.2.10

Swiperの読み込みに関しては、解説しませんが、importかCDNでCSSファイルとJSファイルを読み込んでください。importの例は下記のようになります。

JavaScript

import Swiper from 'swiper';
import 'swiper/css/bundle';

実装方法

それでは実際に実装していきましょう。
まずはHTMLになります。

HTML

<!-- メインのスライダー -->
<div class="swiper main-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://picsum.photos/640/360?random=1" alt="">
    </div>
    <!-- スライダー枚数分追加 -->
  </div>
  <!-- スライダーの矢印ボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<!-- サムネイルのスライダー -->
<div class="swiper thumbs-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://picsum.photos/640/360?random=1" alt="">
    </div>
    <!-- スライダー枚数分追加 -->
  </div>
  <!-- スライダーのスクロールバー -->
  <div class="swiper-scrollbar"></div>
</div>

スライダーとサムネイルが連動するように、main-swiperとthumbs-swiperの2つのスライダーを用意します。メインのスライダーは、main-swiperに、サムネイルのスライダーはthumbs-swiperになります。連動させるためにメインのスライダーとサムネイルのスライダーは同じ順番の画像にしましょう。

サムネイルのスライダーをスクロールバーでスクロールできるように、thumbs-swiperの中にswiper-scrollbarを追加しましょう。

CSS

サムネイルのスライダーと、スクロールバーについてのCSSについて解説します。

CSS

.thumbs-swiper {
  margin-top: 0.5rem;
}

.thumbs-swiper .swiper-slide {
  filter: brightness(0.5);
}

.thumbs-swiper .swiper-slide.swiper-slide-thumb-active {
  filter: brightness(1);
}

.swiper-scrollbar {
  position: static !important;
  margin-top: 0.5rem;
}

メインのスライダーとサムネイルの間に余白を設けるために、margin-topを設定しています。

サムネイルのスライダーの初期状態は、filter: brightness(0.5)で暗くしています。メインのスライダーと連動して、現在表示されている画像のサムネイルには、swiper-slide-thumb-activeクラスが付与されるので、その際はfilter: brightness(1)を使用してアクティブなサムネイルであることが分かるようになります。

スクロールバーのswiper-scrollbarはデフォルトでは、position: absoluteで表示されるので、position: staticにすることで設定を切りましょう。

JavaScript

最後にJavaScriptを実装していきます。
まずは、メインのスライダーとサムネイルのスライダーを取得しましょう。

JavaScript

// メインのスライダーとサムネイルのスライダーを取得
const mainSwiperEl = document.querySelector('.main-swiper');
const thumbsSwiperEl = document.querySelector('.thumbs-swiper');

次はメインのスライダーの設定になります。

JavaScript

// メインのスライダーの設定
const mainSwiper = new Swiper(mainSwiperEl, {
  slidesPerView: 1,
  navigation: {
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next',
  },
  thumbs: {
    swiper: thumbsSwiperEl,
  }
});

メインのスライダーとサムネイルのスライダーを連動させるために、thumbsオプションを使用しthumbsSwiperElを指定します。このようにすることで連動させることが可能になります。

最後にサムネイルのスライダーの設定です。

JavaScript

const thumbsSwiper = new Swiper(thumbsSwiperEl, { 
  slidesPerView: 3,
  freeMode: true,
  watchSlidesProgress: true,
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
})

サムネイルのスライダーは3枚表示させるようにするため、slidesPerViewを3に設定します。freeModeをtrueにすることで、サムネイルのスライダーを自由にスクロールできるようにします。また、watchSlidesProgressをtrueにすることで、サムネイルのスライダーの現在の位置を監視し、メインのスライダーと連動させることが可能になります。

スクロールバーを機能させるためには、scrollbarオプションを使用し、elにスクロールバーの要素(.swiper-scrollbar)を指定します。draggableをtrueにすることで、スクロールバーをドラッグしてスクロールできるようにします。

以上が、Swiperでサムネイル付きのスライダーの実装方法になります。
ぜひ、この実装方法を参考にして、サムネイル付きのスライダーを実装してみてください！

Feylo

Swiperでサムネイル付きのスライダーの実装方法

実装の考え方

バージョン情報

実装方法

HTML

CSS

JavaScript

contact