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

how-to-implement-thumbnail-slides-with-splide

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

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

ITサポート・WEBサイト制作はお任せください

パソコンの動作が遅い
IT機器を入れ替えたい
IT・DXツールを導入したい
WEBサイトを作りたい
WEBサイトの表示がおかしくなった

上記の様なお悩みお気軽にご相談ください！

ご相談はこちらから

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

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

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

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

必要なコード(全体)

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

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"
    />

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

      .thumbnail {
        height: 100px;
      }

      .slide1 {
        background-color: #ff7f7f;
      }

      .slide2 {
        background-color: #ff7fff;
      }

      .slide3 {
        background-color: #7f7fff;
      }

      .slide4 {
        background-color: #7fffff;
      }

      .slide5 {
        background-color: #7fff7f;
      }

      .slide6 {
        background-color: #ffff7f;
      }

      .thumbnail .splide__slide {
        opacity: 0.5;
      }

      .thumbnail .is-active {
        opacity: 1;
        border: 3px solid transparent !important;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

    <div class="wrap-content">
      <div class="main splide">
        <div class="splide__track">
          <div class="splide__list">
            <div class="slide1 splide__slide">スライド1</div>
            <div class="slide2 splide__slide">スライド2</div>
            <div class="slide3 splide__slide">スライド3</div>
            <div class="slide4 splide__slide">スライド4</div>
            <div class="slide5 splide__slide">スライド5</div>
            <div class="slide6 splide__slide">スライド6</div>
          </div>
        </div>
      </div>

      <div class="thumbnail splide">
        <div class="splide__track">
          <div class="splide__list">
            <div class="slide1 splide__slide">スライド1</div>
            <div class="slide2 splide__slide">スライド2</div>
            <div class="slide3 splide__slide">スライド3</div>
            <div class="slide4 splide__slide">スライド4</div>
            <div class="slide5 splide__slide">スライド5</div>
            <div class="slide6 splide__slide">スライド6</div>
          </div>
        </div>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        let main = new Splide(".main", {
          type: "fade",
          autoplay: true,
          interval: 4000,
          rewind: true,
          pagination: false,
          arrows: false,
        });

        let thumbnails = new Splide(".thumbnail", {
          perPage: 6,
          pagination: false,
          arrows: false,
          isNavigation: true,
        });

        main.sync(thumbnails);
        main.mount();
        thumbnails.mount();
      });
    </script>
  </body>
</html>

各コードの解説

Splideを読み込む

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

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"
    />

    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

スライドのHTMLを構築する

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

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

    <div class="wrap-content">
      <div class="main splide">
        <div class="splide__track">
          <div class="splide__list">
            <div class="slide1 splide__slide">スライド1</div>
            <div class="slide2 splide__slide">スライド2</div>
            <div class="slide3 splide__slide">スライド3</div>
            <div class="slide4 splide__slide">スライド4</div>
            <div class="slide5 splide__slide">スライド5</div>
            <div class="slide6 splide__slide">スライド6</div>
          </div>
        </div>
      </div>

      <div class="thumbnail splide">
        <div class="splide__track">
          <div class="splide__list">
            <div class="slide1 splide__slide">スライド1</div>
            <div class="slide2 splide__slide">スライド2</div>
            <div class="slide3 splide__slide">スライド3</div>
            <div class="slide4 splide__slide">スライド4</div>
            <div class="slide5 splide__slide">スライド5</div>
            <div class="slide6 splide__slide">スライド6</div>
          </div>
        </div>
      </div>
    </div>

「splide」が付くクラスは固定で必要です。

その他、メインスライドとサムネイルスライドを区別するためのクラス（main、thumbnail）とスライド番号を示すクラス（slide1、slide2…）を追加しています。

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

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

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

      .thumbnail {
        height: 100px;
      }

      .slide1 {
        background-color: #ff7f7f;
      }

      .slide2 {
        background-color: #ff7fff;
      }

      .slide3 {
        background-color: #7f7fff;
      }

      .slide4 {
        background-color: #7fffff;
      }

      .slide5 {
        background-color: #7fff7f;
      }

      .slide6 {
        background-color: #ffff7f;
      }

      .thumbnail .splide__slide {
        opacity: 0.5;
      }

      .thumbnail .is-active {
        opacity: 1;
        border: 3px solid transparent !important;
      }
    </style>

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

今回のSplideの設定ではアクティブとなったサムネイルスライドに黒色の枠線が表示されてしまうので、それを透過しています。

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

JavaScriptでSplideを設定する

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

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        let main = new Splide(".main", {
          type: "fade",
          autoplay: true,
          interval: 4000,
          rewind: true,
          pagination: false,
          arrows: false,
        });

        let thumbnails = new Splide(".thumbnail", {
          perPage: 6,
          pagination: false,
          arrows: false,
          isNavigation: true,
        });

        main.sync(thumbnails);
        main.mount();
        thumbnails.mount();
      });
    </script>

mainはで自動で切り替わるメインのスライドを設定をしています。

thumbnailsではクリック可能な6枚表示のサムネイルスライドを設定しています。

sync()で両者を同期します。