Splide Web制作 スライダー

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

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

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

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

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

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

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

続きを見る

 

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

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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記事一覧

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

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