【Splide】サムネイルクリックで画像が切り替わるスライダーの作り方

Splideでサムネイル付きのスライダーって作れない？

メインのスライダーの下にサムネイルがあり、それをクリックするとメインのスライドが切り替わるタイプのスライダーの作り方を解説していきます。

今回は4種類解説します。

Splideの基本的な使い方についてはこちらの記事を参照下さい。

Splideでサムネイルクリックで画像が切り替わるスライダーの作り方

まずは基本となるスライダーを見てみましょう。

See the Pen
Splide：基本形 by junpei (@junpei-sugiyama)
on CodePen.

前後の矢印、ページネーションが表示されているシンプルなスライダーです。

そして今回作成するサムネイルスライダーはこちらです。

サムネイル3枚
サムネイル3枚表示（全部で6枚スライド可）
サムネイルの幅を指定
サムネイル2段

文章だけではちょっと分かりにくいですが、デモを見れば違いは分かると思います。

順番に解説していきますが、HTMLは共通で以下のようになります。

<div id="main-carousel" class="splide" aria-label="メインのスライダー">
  <div class="splide__track">
    <div class="splide__list">
      <div class="splide__slide">
        <img src="画像パス1" alt="" />
      </div>
      <div class="splide__slide">
        <img src="画像パス2" alt="" />
      </div>
      <div class="splide__slide">
        <img src="画像パス3" alt="" />
      </div>
    </div>
  </div>
</div>
<div
  id="thumbnail-carousel"
  class="splide"
  aria-label="サムネイルスライダー。各サムネイルをクリックすると、メインのスライダーが切り替わります"
>
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <img src="画像パス1" alt="" />
      </li>
      <li class="splide__slide">
        <img src="画像パス2" alt="" />
      </li>
      <li class="splide__slide">
        <img src="画像パス3" alt="" />
      </li>
    </ul>
  </div>
</div>

上が大きく表示されるメインのスライダーで、下がサムネイルスライダーになります。

画像の枚数は適宜変更して下さい。

CSSは共通でこちらになります。

/* 選択されていないサムネイルは薄くする */
.splide__slide {
  opacity: .6;
}
/* 選択されているサムネイルだけ透過しない */
.splide__slide.is-active {
  opacity: 1;
}
/* 画像サイズ調整 */
.splide__slide img {
  height: auto;
  width: 100%;
}

サムネイルの透過率だけ調整しています。

選択されているサムネイルに黒い線（ボーダー）が表示されますが、これはデフォルトのスタイルで変更可能です。

それでは1つずつ見ていきます。

サムネイル3枚

まずはサムネイルを3枚固定のスライダーです。

JavaScriptはこちらです。

document.addEventListener("DOMContentLoaded", function () {
  // メインスライダー
  const main = new Splide("#main-carousel", {
    type: "fade", // フェード
    rewind: true, // スライダーの終わりまで行ったら先頭に巻き戻す
    pagination: false, // ページネーション非表示
    arrows: false, // 矢印非表示
  });
  // サムネイル
  const thumbnails = new Splide("#thumbnail-carousel", {
    perPage: 3, // サムネイル3枚表示
    pagination: false, // ページネーション非表示
    isNavigation: true, // 他のスライダーのナビゲーションとしてそれぞれのスライドをクリック可能にする
  });
  main.sync(thumbnails);
  main.mount();
  thumbnails.mount();
});

ページネーションはどちらも非表示で、矢印はサムネイルの方だけ表示しています（矢印はメインの方だけ表示させることも可能）

メインのスライダーはスライドの切り替わり方を『スライド』から『フェード』にしています。

スライドも出来ますが、フェードの方が自然かと思います。

サムネイルの枚数はperPage: 3,で設定しています。

あと重要なのがこちら。

isNavigation: true, // 他のスライダーのナビゲーションとしてそれぞれのスライドをクリック可能にする

これがサムネイルをクリック可能にするオプションになります。

こちらがデモです。

See the Pen
Splide：サムネイル（未完成） by junpei (@junpei-sugiyama)
on CodePen.

サムネイル3枚表示（全部で6枚スライド可）

次はサムネイルが6枚ですが、表示は3枚でスライド可能なスライダーです。

JavaScriptはこちらです。

document.addEventListener("DOMContentLoaded", function () {
  // メインスライダー
  const main = new Splide("#main-carousel", {
    type: "fade", // フェード
    rewind: true, // スライダーの終わりまで行ったら先頭に巻き戻す
    pagination: false, // ページネーション非表示
    arrows: false, // 矢印非表示
  });
  // サムネイル
  const thumbnails = new Splide("#thumbnail-carousel", {
    type: "loop", // ループさせる
    perPage: 3, // サムネイル3枚表示
    pagination: false, // ページネーション非表示
    isNavigation: true, // 他のスライダーのナビゲーションとしてそれぞれのスライドをクリック可能にする
    focus: "center", // アクティブなスライドを中央にする
  });
  main.sync(thumbnails);
  main.mount();
  thumbnails.mount();
});

先ほどと違う点はサムネイルの以下2つです。

type: "loop", // ループさせる
focus: "center", // アクティブなスライドを中央にする

どちらも無くても大丈夫ですが、ループさせないと端っこでスライドは止まります。

またアクティブなスライドを中央にしていますが、設定しないとアクティブなスライドは左になります。

と文章で説明しても分かりにくいと思うので、まずはどちらも設定しない場合のデモはこちらになります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

そしてループとセンターモードを設定したのがこちらです。

See the Pen
Splide：サムネイル（6枚：3枚表示） by junpei (@junpei-sugiyama)
on CodePen.

どちらがいいかはお好みですね。

サムネイルの幅を指定

ここまではサムネイルは枚数で指定していましたが、今度は幅を指定します。

JavaScriptはこちらです。

document.addEventListener("DOMContentLoaded", function () {
  // メインスライダー
  const main = new Splide("#main-carousel", {
    type: "fade", // フェード
    rewind: true, // スライダーの終わりまで行ったら先頭に巻き戻す
    pagination: false, // ページネーション非表示
    arrows: false, // 矢印非表示
  });
  // サムネイル
  const thumbnails = new Splide("#thumbnail-carousel", {
    fixedWidth: 120, // サムネイルの幅
    type: "loop", // ループさせる
    perPage: 3, // サムネイル3枚表示
    pagination: false, // ページネーション非表示
    isNavigation: true, // 他のスライダーのナビゲーションとしてそれぞれのスライドをクリック可能にする
    focus: "center", // アクティブなスライドを中央にする
    breakpoints: {
      400: { // 幅400px未満の設定
        fixedWidth : 80, // サムネイルの幅
      },
    },
  });
  main.sync(thumbnails);
  main.mount();
  thumbnails.mount();
});

サムネイルの幅を指定するのはfixedWidthになります。

そしてbreakpointsを使って画面幅400px以上と未満でサムネイルの幅を変えています。

今回は画面幅400px以上ではサムネイルの幅を120px、画面幅400px未満でサムネイルの幅を80pxにしています。

こちらがデモになります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

パソコンの場合は左上のHTML・CSS・JSなどをクリックして画面幅を狭くすると、サムネイルの幅も変わるのが分かると思います。

サムネイルのアスペクト比がそろっていない場合

またサムネイルのアスペクト比がそろっていない場合は、オプションのfixedHeightでサムネイルスライドの高さを指定して、CSSのobject-fitで画像のサイズをそろえればOKです。

JavaScriptはこちらです（メインと無関係なオプションは省略）

document.addEventListener("DOMContentLoaded", function () {
  // サムネイル
  const thumbnails = new Splide("#thumbnail-carousel", {
    fixedWidth: 100, // サムネイルの幅
    fixedHeight: 60, // サムネイルの高さ
  });
  main.sync(thumbnails);
  main.mount();
  thumbnails.mount();
});

そしてCSSはこちらです。

.splide__slide img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

サムネイル2段

最後はサムネイルを2段にしてみます。

JavaScriptはこちらです。

document.addEventListener("DOMContentLoaded", function () {
  // メインスライダー
  const main = new Splide("#main-carousel", {
    type: "fade", // フェード
    rewind: true, // スライダーの終わりまで行ったら先頭に巻き戻す
    pagination: false, // ページネーション非表示
  });
  // サムネイル
  const thumbnails = new Splide("#thumbnail-carousel", {
    arrows: false, // 矢印非表示
    perPage: 6, // サムネイル6枚表示
    pagination: false, // ページネーション非表示
    isNavigation: true, // 他のスライダーのナビゲーションとしてそれぞれのスライドをクリック可能にする
  });
  main.sync(thumbnails);
  main.mount();
  thumbnails.mount();
});

今まで変わったところはありませんが、サムネイルの表示枚数を6枚にして、矢印をサムネイルからメインの方に変えています。

そして追記したCSSがこちらです。

/* サムネイルの幅を調整 */
.splide__track--nav > .splide__list > .splide__slide {
  width: 100% !important;
}
.splide__track--nav > .splide__list > .splide__slide.is-active {
  width: 100% !important;
}
/* サムネイルをグリッド表示 */
#thumbnail-carousel .splide__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

grid-template-columnsの3の数字を変えると最大表示枚数が変わります。

今回は3にして上下で3枚ずつ表示します。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.