Swiper.jsで自動で切り替わるサムネイル付きスライドを実装する方法

how-to-implement-thumbnail-slides-with-swiper

Swiper.jsで自動で切り替わるサムネイル付きスライドを実装する方法

2025/08/06 | WEB, WEBデザイン

今回はJavaScriptのスライダーライブラリ「Swiper」を使って、自動で切り替わるサムネイル付きスライドをWEBサイトに表示する方法をご紹介します。

サムネイル付きスライドの完成イメージ

メインのスライドが自動で切り替わり、それに連動してサムネイルスライドもアクティブな状態が切り替わる仕組みです。

サムネイルをクリックすると、メインスライドも切り替わります。

必要なコード(全体)

まずは、すべてのコードをまとめてご紹介します。

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />

    <style>
      .main {
        height: 400px;
      }

      .thumbnail {
        height: 100px;
      }

      .swiper-wrapper > :first-child {
        background-color: #ff7f7f;
      }

      .swiper-wrapper > *:nth-child(2) {
        background-color: #ff7fff;
      }

      .swiper-wrapper > *:nth-child(3) {
        background-color: #7f7fff;
      }

      .swiper-wrapper > *:nth-child(4) {
        background-color: #7fffff;
      }

      .swiper-wrapper > *:nth-child(5) {
        background-color: #7fff7f;
      }

      .swiper-wrapper > :last-child {
        background-color: #ffff7f;
      }

      .thumbnail .swiper-slide {
        opacity: 0.5;
        cursor: pointer;
      }

      .thumbnail .swiper-slide-thumb-active {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        let slideThumbnail = new Swiper(".thumbnail", {
          slidesPerView: 6,
          loop: true,
        });

        let slider = new Swiper(".main", {
          effect: "fade",
          thumbs: {
            swiper: slideThumbnail,
          },
          autoplay: {
            delay: 5000,
          },
        });
      });
    </script>

    <div class="wrap-content">
      <div class="swiper main">
        <div class="swiper-wrapper">
          <div class="swiper-slide">スライド1</div>
          <div class="swiper-slide">スライド2</div>
          <div class="swiper-slide">スライド3</div>
          <div class="swiper-slide">スライド4</div>
          <div class="swiper-slide">スライド5</div>
          <div class="swiper-slide">スライド6</div>
        </div>
      </div>

      <div class="swiper thumbnail">
        <div class="swiper-wrapper">
          <div class="swiper-slide">スライド1</div>
          <div class="swiper-slide">スライド2</div>
          <div class="swiper-slide">スライド3</div>
          <div class="swiper-slide">スライド4</div>
          <div class="swiper-slide">スライド5</div>
          <div class="swiper-slide">スライド6</div>
        </div>
      </div>
    </div>
  </body>
</html>

各コードの解説

Swiperを読み込む

CDNを利用してSwiperを読み込みます。

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

スライドのHTMLを構築する

スライドの基本的なHTMLを構築します。

今回は6枚のスライドとして、メインスライドとサムネイルスライドで同じ内容を用意します。

    <div class="wrap-content">
      <div class="swiper main">
        <div class="swiper-wrapper">
          <div class="swiper-slide">スライド1</div>
          <div class="swiper-slide">スライド2</div>
          <div class="swiper-slide">スライド3</div>
          <div class="swiper-slide">スライド4</div>
          <div class="swiper-slide">スライド5</div>
          <div class="swiper-slide">スライド6</div>
        </div>
      </div>

      <div class="swiper thumbnail">
        <div class="swiper-wrapper">
          <div class="swiper-slide">スライド1</div>
          <div class="swiper-slide">スライド2</div>
          <div class="swiper-slide">スライド3</div>
          <div class="swiper-slide">スライド4</div>
          <div class="swiper-slide">スライド5</div>
          <div class="swiper-slide">スライド6</div>
        </div>
      </div>
    </div>

「swiper」が付くクラスは固定で必須です。

これに加えて、メインスライドとサムネイルスライドを区別するためのクラス（main、thumbnail）をそれぞれ追加しています。

CSSでスライドのスタイルを設定する

スライドの表示を調整するためのCSSを設定します。

    <style>
      .main {
        height: 400px;
      }

      .thumbnail {
        height: 100px;
      }

      .swiper-wrapper > :first-child {
        background-color: #ff7f7f;
      }

      .swiper-wrapper > *:nth-child(2) {
        background-color: #ff7fff;
      }

      .swiper-wrapper > *:nth-child(3) {
        background-color: #7f7fff;
      }

      .swiper-wrapper > *:nth-child(4) {
        background-color: #7fffff;
      }

      .swiper-wrapper > *:nth-child(5) {
        background-color: #7fff7f;
      }

      .swiper-wrapper > :last-child {
        background-color: #ffff7f;
      }

      .thumbnail .swiper-slide {
        opacity: 0.5;
        cursor: pointer;
      }

      .thumbnail .swiper-slide-thumb-active {
        opacity: 1;
      }
    </style>

サムネイルスライドは半透明を初期状態として、アクティブになると透過なしで表示されるスタイルを設定しています。

また、サムネイルスライドをマウスホバーしたときのカーソルをポインターへ変更しています。

その他はサンプル用の配色設定となります

JavaScriptでSwiperを設定する

Swiperの機能を有効にするためのJavaScriptを記述します。

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        let slideThumbnail = new Swiper(".thumbnail", {
          slidesPerView: 6,
          loop: true,
        });

        let slider = new Swiper(".main", {
          effect: "fade",
          thumbs: {
            swiper: slideThumbnail,
          },
          autoplay: {
            delay: 5000,
          },
        });
      });
    </script>

サムネイルスライドは6枚を繰り返し表示としています。

メインのスライドは1枚をフェードイン・アウトで自動的に切り替えながら表示します。

サムネイルスライドを先に初期化し、そのインスタンスをメインスライドのthumbsオプションに指定することで、両方のスライドが連動するようになります。