MENU
  1. ホーム
  2. コーディング
  3. 【初心者向け】Splideの実装からカスタマイズまで徹底解説

【初心者向け】Splideの実装からカスタマイズまで徹底解説

コーディング
目次

はじめに

「JavaScriptのライブラリって結局コピペで済ませちゃってる…」
「クライアントからスライダーの修正依頼が来たけど、どう対応すればいいんだろう…」

Webサイト制作において、スライダー（画像やコンテンツを切り替えて表示する機能）の実装は避けては通れないスキルの一つです。

特にポートフォリオサイトを作る際や、実務でクライアントワークを行う際によく求められる機能です。

しかし、JavaScriptライブラリの実装やカスタマイズは、HTMLやCSSに比べて敷居が高く感じる方も多いのではないでしょうか。

この記事では、初学者でも実装できるSplideの使い方を、実践的なコード例とともに解説していきます。

本記事のポイントは以下の3つです。

  • 初心者でも分かる！環境構築から丁寧に解説
  • コピペでそのまま使える！実践的なコード例を提供
  • ポートフォリオに使える！カスタマイズ例も紹介

必要な時にすぐ参照できるよう、ブックマークしておくと便利です。

Splideの基本セットアップ

「環境構築って難しそう…」と思われがちですが、Splideは非常にシンプルに導入できます。

  • Splideの導入方法は主に3つあります：
  • CDN（リンクを追加するだけの最も簡単な方法）
  • npm（Node.jsプロジェクトでの導入）
  • ダウンロード（ファイルをダウンロードして使用）

今回は、最も手軽に始められるCDNでの導入方法を中心に解説していきます。

1. CDNの読み込み

まず、下記のSplideの公式ページからCDNをコピーしてきます。

あわせて読みたい
Splide – アクセシビリティに配慮した軽量・高機能スライダー アクセシビリティに配慮した軽量・高機能スライダー。ほかのライブラリに依存せず、Lighthouseのエラーもありません。

Splideの公式ページから「はじめる」を選択してください。

Splideの公式ページから「はじめる」を選択する参考画像
Splideの公式ページから「はじめる」を選択

「CDNを利用」の箇所から「jsDelivr」をクリックしてください。

「jsDelivr」をクリックする参考画像
「jsDelivr」をクリック

開いたページからコードをコピーしてメモしておいてください。

コードをコピーしてメモする参考画像
コードをコピーしてメモ

次に、HTMLファイルのheadタグとbodyタグ内に先ほどのコードを追加して、SplideのCSSとJavaScriptを読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Splide CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Splideスライダー</title>
</head>
<body>
    <main>
    </main>
    <!-- Splide JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

2. HTMLの記述

次に、スライダーを表示したい場所に以下のHTMLを追加します。

<div class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <!-- スライド1 -->
            <li class="splide__slide">
                <img src="https://picsum.photos/1920/1080" alt="スライド画像1">
            </li>
            <!-- スライド2 -->
            <li class="splide__slide">
                <img src="https://picsum.photos/1920/1079" alt="スライド画像2">
            </li>
            <!-- スライド3 -->
            <li class="splide__slide">
                <img src="https://picsum.photos/1920/1078" alt="スライド画像3">
            </li>
        </ul>
    </div>
    <!-- ページネーション -->
    <div class="splide__pagination"></div>
    <!-- ナビゲーションボタン -->
    <div class="splide__arrows">
        <button class="splide__arrow splide__arrow--prev"></button>
        <button class="splide__arrow splide__arrow--next"></button>
    </div>
</div>

3. JavaScriptの初期化

JSファイルに以下のコードを追加します。

document.addEventListener('DOMContentLoaded', function() {
    new Splide('.splide', {
        type: 'loop',        // ループスライダーにする
        perPage: 1,         // 1度に表示するスライド数
        autoplay: true,     // 自動再生を有効
        interval: 3000,     // 自動再生の間隔（ミリ秒）
        pauseOnHover: true, // ホバー時に一時停止
        arrows: true,       // 矢印ボタンを表示
        pagination: true,   // ページネーションを表示
    }).mount();
});

4. CSSのスタイリング

style.cssファイルに以下のスタイルを追加して、画像のサイズを調整します。

.splide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

これで基本的なスライダーの実装は完了です！

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

動作確認のポイント

うまく表示されないときは以下を確認してみてください。

  • CDNのリンクが正しく読み込まれているか
  • クラス名が正しく設定されているか
  • JavaScriptファイルが正しく読み込まれているか

実践で使えるカスタマイズ例5選

現場でよく使われるスライダーのカスタマイズ例を5つ紹介します。コードをコピー＆ペーストするだけで、ポートフォリオや実務で使えるスライダーが実装できます。

① 複数枚表示スライダー

商品一覧やブログ記事一覧でよく使用されるパターンです。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen. 

<div class="splide multi-splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"><img src="https://picsum.photos/400/300"></li>
            <li class="splide__slide"><img src="https://picsum.photos/400/299"></li>
            <li class="splide__slide"><img src="https://picsum.photos/400/298"></li>
            <li class="splide__slide"><img src="https://picsum.photos/400/297"></li>
        </ul>
    </div>
</div>
.multi-splide {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.multi-splide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
new Splide('.multi-splide', {
    type: 'loop',
    perPage: 3,
    perMove: 1,
    gap: 20,
    pagination: false,
    breakpoints: {
        768: {
            perPage: 2,
        },
        480: {
            perPage: 1,
        },
    }
}).mount();

② 自動再生スライダー

コーポレートサイトのメインビジュアルなどで定番のパターンです。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen. 

<div class="splide auto-splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"><img src="https://picsum.photos/800/400"></li>
            <li class="splide__slide"><img src="https://picsum.photos/800/399"></li>
            <li class="splide__slide"><img src="https://picsum.photos/800/398"></li>
        </ul>
    </div>
</div>
.auto-splide {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.auto-splide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
new Splide('.auto-splide', {
    type: 'fade',
    rewind: true,
    autoplay: true,
    interval: 4000,
    pauseOnHover: false,
    arrows: false,
    pagination: true,
}).mount();

③ サムネイル付きスライダー

写真ギャラリーやポートフォリオの作品紹介で重宝するパターンです。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen. 

<!-- メインスライダー -->
<div class="splide main-splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"><img src="https://picsum.photos/800/400"></li>
            <li class="splide__slide"><img src="https://picsum.photos/800/399"></li>
            <li class="splide__slide"><img src="https://picsum.photos/800/398"></li>
        </ul>
    </div>
</div>

<!-- サムネイルスライダー -->
<div class="splide thumbnail-splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"><img src="https://picsum.photos/400/300"></li>
            <li class="splide__slide"><img src="https://picsum.photos/400/299"></li>
            <li class="splide__slide"><img src="https://picsum.photos/400/298"></li>
        </ul>
    </div>
</div>
.main-splide {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 10px;
}

.main-splide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.thumbnail-splide {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.thumbnail-splide img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity .3s;
}

.thumbnail-splide .is-active img {
    opacity: 1;
}
document.addEventListener('DOMContentLoaded', function() {
    let main = new Splide('.main-splide', {
        type: 'loop',
        perPage: 1,
        arrows: true,
        pagination: false,
    });

    let thumbnails = new Splide('.thumbnail-splide', {
        perPage: 4,
        gap: 10,
        rewind: true,
        pagination: false,
        isNavigation: true,
    });

    main.sync(thumbnails);
    main.mount();
    thumbnails.mount();
});

④ 無限ループスライダー

お知らせなど、コンテンツを流し続けたい場合に使用するパターンです。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen. 

<div class="splide loop-splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                <img src="https://picsum.photos/400/250" alt="画像1">
            </li>
            <li class="splide__slide">
                <img src="https://picsum.photos/400/251" alt="画像2">
            </li>
            <li class="splide__slide">
                <img src="https://picsum.photos/400/252" alt="画像3">
            </li>
            <li class="splide__slide">
                <img src="https://picsum.photos/400/253" alt="画像4">
            </li>
            <li class="splide__slide">
                <img src="https://picsum.photos/400/254" alt="画像5">
            </li>
        </ul>
    </div>
</div>
.loop-splide {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.loop-splide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* スライド間のギャップを設定 */
.splide__slide {
    margin-right: 20px;
}
document.addEventListener('DOMContentLoaded', function() {
    let splide = new Splide('.loop-splide', {
        type: 'loop',
        drag: 'free',
        focus: 'center',
        perPage: 3,
        autoScroll: {
            speed: 1,
        },
        arrows: false,
        pagination: false,
        autoplay: true,
        interval: 0,
        speed: 20000,
        easing: 'linear',
        waitForTransition: false,
        updateOnMove: true,
    });

    splide.mount();
});

⑤ フェード効果スライダー

ポートフォリオサイトのメインビジュアルや写真ギャラリーで、よりスタイリッシュな演出を加えたい場合に使用するパターンです。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen. 

<div class="splide fade-splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"><img src="https://picsum.photos/800/400"></li>
            <li class="splide__slide"><img src="https://picsum.photos/800/399"></li>
            <li class="splide__slide"><img src="https://picsum.photos/800/398"></li>
        </ul>
    </div>
    <div class="splide__progress">
        <div class="splide__progress__bar"></div>
    </div>
</div>
.fade-splide {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.fade-splide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.splide__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,0.3);
}

.splide__progress__bar {
    height: 100%;
    background: #fff;
}
new Splide('.fade-splide', {
    type: 'fade',
    rewind: true,
    autoplay: true,
    interval: 5000,
    arrows: false,
    pagination: false,
    speed: 1500,
    pauseOnHover: false,
}).mount();

さいごに

今回は、Web制作でよく使用されるSplideの実装方法について紹介してきました。

実装のポイントをまとめると

  • CDNでの導入が最も手軽で、初心者にもおすすめ
  • 基本的な実装は、HTMLの構造を理解すれば簡単
  • カスタマイズは、オプションを組み合わせることで柔軟に対応可能

次のステップとして

  1. まずは基本実装から始めて、徐々にカスタマイズを試してみましょう
  2. サンプルコードを参考に、自分のプロジェクトに合わせた調整を行ってください
  3. 公式ドキュメントも参考に、より高度なカスタマイズにもチャレンジしてみてください

参考リソース

少しずつカスタマイズの幅を広げていけば、クライアントからの要望にも柔軟に対応できるようになります。まずは基本的な実装を確実にマスターし、そこから徐々にレベルアップしていきましょう。

関連記事

あわせて読みたい
モダンなダークモードトグルをJavaScriptとCSS変数で実装する方法 はじめに 最近のWebサイトでは、ユーザーの好みに応じてダークモードとライトモードを切り替える機能が当たり前になってきています。しかし、「システム設定と連携させ...
あわせて読みたい
【図解】Shopifyの無限スライダー（カルーセル）をコピペだけで5分実装！初心者にもわかりやすく画像付... Shopifyの無限スライダー（カルーセル）をコピペだけで5分実装する方法 こんにちは！Shopifyエンジニアのりょうま(@ryoo_black)です。 ストアの見栄えを良くしたいけど...
コーディング
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次