この記事にはプロモーションが含まれています。

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

2024-05-282024-06-09

ケケンタ

こんにちは！　ケケンタです。

この記事では

サムネイル型のスライドショーを簡単に作成する方法

をご紹介します。

シンプルなスライダーであれば同じくJavaScriptライブラリの「Slickスライダー」を使用することで簡単に実装できますが、サムネイル型のスライダーの実装となると話が変わってきます。

そこで今回はJavaScriptライブラリの「Splide.js」を使用する方法をご紹介していきます。

今回ご紹介するサムネイル型スライダー

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
会員の自動更新を解除しておく＝期限が来たら自動解約
１～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

サムネイル型スライダーのソースコード

早速ですが、以下が今回ご紹介するサムネイル型スライダーの完成形です。

See the Pen thumbnail slider【Splide】 by ケケンタ (@lgshifbg-the-looper) on CodePen.

実際にクリックしていただくと分かりますが、このスライダーの特徴は以下の通りです。

このスライダーの特徴

メイン画像と画像リストが連動している
画像リストの矢印でスライドを切り替えられる
画像リスト上の画像をクリックすることでスライドを切り替えられる
最後のスライドの次は先頭に戻る

Splide.jsにはその他にも様々なオプションがあり、細かな制御が可能です。

ケケンタ

例えば今回はスライドアニメーションを「フェード」にしていますが、これを別の表現に変えることも可能です。

実際に作成する際の手順

実際にこのサムネイル型スライダーを作成する手順をお伝えします。

Splide.jsでサムネイル型スライダーを作成する手順

Splide用のCSSを読み込む
Splide用のjsファイルを読み込む
メイン画像用のHTMLと画像リスト用のHTMLを別々に用意する（このとき設定する画像の枚数と順番を一致させる）
スライダーのオプションを設定するためのjsファイルを用意する
見た目を整えるためのCSSファイルを用意する

ケケンタ

上記のポイントを抑えることで簡単にサムネイル型スライダーを作成できます！

①Splide用のCSSファイルを読み込む

headタグ内に以下のコードを記述します。

<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

②Splide用のjsファイルを読み込む

続いて、bodyの終了タグ（</body>）の前に以下を記述する

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

①、②でご紹介しているのはCDN方式による読み込みです。また、ver4.1.4時点のものになります。
最新のバージョンを使用したい方は以下の公式リンクから新たに上記コードをコピペして下さい。

https://www.jsdelivr.com/package/npm/@splidejs/splide?path=dist

③メイン画像用のHTMLと画像リスト用のHTMLを別々に用意する

ここがある意味もっとも重要な内容です。

具体的には、以下のような構造でHTMLを用意します。

<!-- スライダー全体のサイズを制御するためのラッパー -->
<div class="splide-wrapper">

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

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

Splideでサムネイル型スライダーを作成する場合、理屈としては２つのスライダーを連動（同期）させることになります。
つまり、「メインスライダーの◯枚目の画像」と「画像リストの◯枚目の画像」が紐づいている状態になります。
そのため、メインスライダーと画像リストの画像の枚数・画像の並び順を一致させることが最も重要なポイントです。

大枠のラッパー要素（splide-wrapper）については僕が勝手に追加したものではありますが、これがあった方がスライダーのサイズを制御しやすくなるため使用することをオススメします。

④スライダーのオプションを設定するためのjsファイルを用意する

作成したスライダーのオプションを設定するためのjsファイルを用意し、それを読み込みます。

自作したjsファイル

document.addEventListener('DOMContentLoaded', function () {
    // メイン画像のオプション   
    var main = new Splide('#main-carousel', {
        type: 'fade', // スライドアニメをフェード形式にする
        rewind: true, // スライドをループするかどうか
        pagination: false, // ドットインジケーターを非表示
        arrows: false, // 矢印を非表示
    });

    // 画像リストのオプション
    var thumbnails = new Splide('#thumbnail-carousel', {
        rewind: true, // スライドをループするかどうか
        arrows: true, // 矢印を表示
        pagination: false, // ドットインジケーターを非表示
        isNavigation: true, // 画像クリックでスライドを切り替えられるようにする
      　perPage: 3,  // 画像リストに表示する枚数
        gap: "3%" // 画像リストの余白
    });

    // メイン画像と画像リストを連動させる記述   
    main.sync(thumbnails);
    main.mount();
    thumbnails.mount();
});

ご覧の通り、オプションは「メイン画像」、「画像リスト」の両方にそれぞれ設定を行います。

ケケンタ

２つのスライダーは元々は完全に別々のスライダーとして機能しており、それを最後の３行で連動（同期）させているという理屈です。

オプションについては公式サイトに様々なものが紹介されていますので、そちらをご覧いただいて調整してみて下さい。
【公式サイト】https://ja.splidejs.com/guides/options/

また、作成したjsファイルの読み込み位置は、必ず「Splide用のjsファイル読み込み行以降」にしてください。
※順番が逆になると読み込み順序の関係で上手く動作しません。

読み込み例

<!-- Splide用js読み込み -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

<!--  自分で用意したjsファイル  -->
<script src="js/slide.js"></script>

⑤ 見た目を整えるためのCSSファイルを用意する

最後に、見た目を整えるためのCSSを読み込めばサムネイル型スライダーの完成です！

今回用意したCSS

/* スライダー全体を囲うラッパー要素 */
.splide-wrapper {
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}

.main-carousel {
    /* メイン画像と画像リストの間の余白 */
    margin-bottom: 30px;
}

.main-carousel .splide__track {
    /* メイン画像の比率 */
    aspect-ratio: 1 / 1;
}

#thumbnail-carousel .splide__slide {
    /* 画像リストの画像の比率 */
    aspect-ratio: 1 / 1;
}

.splide__slide {
    /* 非表示中の画像は薄くする */
    opacity: 0.6;
}

.splide__slide.is-active {
    opacity: 1;
}

/* 画像が指定のサイズ内に収まるようにするためのCSS */
.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
  /* 表示中の画像のボーダーを除きたいときは下記を有効化する */
  /* border: none !important; */
}

サムネイル型スライダー（完成形）