【Splide.js】サムネイル付きのカルーセルスライダーを作成しよう！

当ページのリンクには広告が含まれています。

Javascript

2025年1月11日

カルーセルスライダーは、視覚的なインパクトを与えつつ、コンテンツを効率よく表示するための便利なツールです。

中でもサムネイル付きのスライダーは、ユーザーに直感的なナビゲーションを提供し、より魅力的なデザインを実現できます。

今回は、軽量かつ高機能なJavaScriptライブラリ「Splide.js」を使って、サムネイル付きのカルーセルスライダーを簡単に作成する方法をご紹介します。

レメディオ

初心者でも手軽に実装できる手順を詳しく解説するので、ぜひ一緒に挑戦してみましょう！

当環境で使用しているsplide.jsのバージョンについて
splide-core.min.css（4.1.4）
splide.min.js（4.1.4）

この記事を書いている人（ilogyの中の人）

iPadやガジェットの情報を発信。（2020年からブログ運営開始）
実務で使えるフロント周りのweb制作技術を発信。
レメプラで、デジタルプランナーも作っています。

サムネイル付きのカルーセルスライダーの作成手順

サムネイル付きのカルーセルスライダーの作成手順は3つのステップに分かれています。

STEP

サムネイルスライダーを作成

ちょっと難易度高め

プレビュー付きのサムネイルスライダーを作成！

STEP

メインスライダーを作成

難易度低い

メインスライダーは通常のスライダーなので簡単！

STEP

サムネイルスライダーとメインスライダーを同期

難易度かなり低い

.syncを使って、同期させましょう。

レメディオ

ステップ1が少し難しいですが、そこを乗り越えれば後は簡単なので、頑張りましょう！

完成コードはこちら

サムネイルスライダーを作成

先に、サムネイルスライダーの完成コードは以下の通りです。

<section
id="thumbnail-carousel"
class="splide"
aria-label="サムネイルスライダー。各サムネイルをクリックすると、メインのスライダーが切り替わります"
>
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="https://picsum.photos/id/1/200/200" alt="splide01" width="200" height="200"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/2/200/200" alt="splide02" width="200" height="200"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/3/200/200" alt="splide03" width="200" height="200"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/4/200/200" alt="splide03" width="200" height="200"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/5/200/200" alt="splide03" width="200" height="200"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/6/200/200" alt="splide03" width="200" height="200"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/7/200/200" alt="splide03" width="200" height="200"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/8/200/200" alt="splide03" width="200" height="200"></li>
    </ul>
  </div>
</section>

const thumbnailCarousel =  new Splide( '#thumbnail-carousel', {
  fixedWidth: 100,
  gap       : 10,
  rewind    : true,
  pagination: false,
  focus      : 'center',
  isNavigation: true,
  breakpoints: {
    600: {
      fixedWidth : 60,
      fixedHeight: 44,
    },
  },
} );

thumbnailCarousel.mount();

ポイント

どのスライドが選択されているのか分かるようにする。.splide__slide.is-activeの時の対応
モバイル端末では100pxだと少し大きいので調整。breakpointsを設定
現在選択されているスライドは、中央に表示する。focusを'center'に設定。
各スライドをクリック可能にするため、isNavigationをtrueに設定。

メインスライダーを作成

先に、メインスライダーの完成コードは以下の通りです。

<section
id="main-carousel"
class="splide"
aria-label="サムネイルスライダー。各サムネイルをクリックすると、メインのスライダーが切り替わります"
>
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="https://picsum.photos/id/1/400/400" alt="splide01" width="400" height="400"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/2/400/400" alt="splide02" width="400" height="400"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/3/400/400" alt="splide03" width="400" height="400"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/4/400/400" alt="splide03" width="400" height="400"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/5/400/400" alt="splide03" width="400" height="400"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/6/400/400" alt="splide03" width="400" height="400"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/7/400/400" alt="splide03" width="400" height="400"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/8/400/400" alt="splide03" width="400" height="400"></li>
    </ul>
  </div>
</section>

const mainCarousel = new Splide( '#main-carousel', {
  type: 'fade',
  rewind: true,
  pagination: false,
  arrows: false,
} );

mainCarousel.mount();

ポイント

idをサムネイルスライダーと別の名前にする。（id="main-carousel"）
fadeスライドを作成したいので、type: 'fade'を指定する。

レメディオ

通常のスライドを作成すればいいので、簡単ですね！

サムネイルスライダーとメインスライダーを同期

最後に、Splide#sync()メソッドを用いて、作成した2つのスライダーを同期させます。

const mainCarousel = new Splide( '#main-carousel', {
// 省略
});

const thumbnailCarousel = new Splide( '#thumbnail-carousel', {
// 省略
});

mainCarousel.sync(thumbnailCarousel);
mainCarousel.mount();
thumbnailCarousel.mount();

ポイント