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

JavaScript
更新:

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

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

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

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

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

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

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

ちょっと難易度高め

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

難易度低い

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

難易度かなり低い

.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>
#thumbnail-carousel {
	.splide__slide {
		opacity: 0.6;
	}

	.splide__slide.is-active {
		opacity: 1;
	}
}
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();
  • Splide#sync()メソッドは、Splide#mount()よりも前に記載する必要がある。
レメディオ
最後は、とっても簡単にできましたね！お疲れ様でした。

サムネイル付きのカルーセルスライダー作成のまとめ

Splide.jsでサムネイル付きのカルーセルスライダーを作成する手順をまとめました。

全体のポイントをおさらいして終わりにしましょう！

  • どのスライドが選択されているのか分かるようにする。.splide__slide.is-activeの時の対応
  • モバイル端末では100pxだと少し大きいので調整。breakpointsを設定
  • 現在選択されているスライドは、中央に表示する。focusを'center'に設定。
  • 各スライドをクリック可能にするため、isNavigationをtrueに設定。
  • idをサムネイルスライダーと別の名前にする。（id="main-carousel"）
  • fadeスライドを作成したいので、type: 'fade'を指定する。
  • Splide#sync()メソッドは、Splide#mount()よりも前に記載する必要がある。