Splide Web制作 スライダー

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

2023年3月8日

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

あわせて読みたい
【2023年最新】Splideの使い方とよく使うオプション・カスタマイズ方法を解説
【2024年最新】Splideの使い方とよく使うオプション・カスタマイズ方法を解説

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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.

まとめ

今回はSplideでサムネイルクリックで画像が切り替わるスライダーの作り方を解説してきました。

オプション次第でいろいろと見え方を変えられるので、ぜひ試してみて下さい。

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-Splide, Web制作, スライダー