【2023年最新】Splideの使い方とよく使うオプション・カスタマイズ方法を解説

Splideってスライダーはどうなの？

Web制作ではスライダーの実装は非常に良くある実装の1つです。

このブログではslickやSwiperというプラグインを使った実装を多くご紹介していますが、もう一つおすすめのスライダーライブラリがSplideになります。

今回はSplideを使った基本的なスライダーの実装方法を解説していきます。

今だけ！5大無料特典あり🎁

コーディングの時給アップにはこちら！

830部突破！※ 4月15日値上げ予定

Splideとはどんなライブラリ（プラグイン）か？

Splide公式サイト

Splideとは、スライダーが簡単に作れるJavaScriptのライブラリになります。

スライダーを実装する場合は、自作よりこういったライブラリやプラグインを使うと簡単です。

スライダーを実装するときは『Swiper』か『slick』を使う人が多いと思います。

当ブログでは両方とも記事がたくさんあるので、これらを使っていて分からない実装があれば参考にしてみて下さい。

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

Splide・Swiper・slickの違いを比較

スライダー系プラグインとして有名なSwiperとslickですが、以下のような違いがあります。

ライブラリ名（プラグイン名）	slick（1.8.1）	Swiper（9.1.0）	Splide（Ver4.1.3）
jQuery	依存（必要）	非依存（不要）	非依存（不要）
jsの容量	43KB＋90KB（jQuery3.6.3）	137KB	30KB
エフェクト	スライドとフェード	7種類	スライドとフェード
パララックス	なし	あり	なし
スワイプのしやすさ	ほぼ真横の必要あり	多少斜めでもOK	多少斜めでもOK
更新頻度	最終更新2017年9月	高頻度（最終更新2023年3月）	高頻度（最終更新2022年9月）
公式ドキュメント	英語	英語	日本語

Splideのメリット

jQueryに依存しない
スワイプしやすい（slickに比べて）
容量が軽い
アクセシビリティに優れている
公式ドキュメントが日本語

jQueryに依存しない

これは先ほどの比較表でも書きましたが、SplideはjQuery不要なのでjQueryが使えない案件でも使えます。

スワイプしやすい（slickに比べて）

slickはほぼ真横にスワイプしないとスライドが切り替わりませんが、Splideは多少斜めにスワイプしても切り替わります。

スマホで試してみると分かると思うので、ぜひ試してみて下さい。

まずはslickがこちら。

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

そしてこちらがSplideです。

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

容量が小さい

先ほどの比較表でも書きましたが、slickとSwiperのjsファイルの容量で比較してみます。

ライブラリ名	バージョン	容量
Splide	4.1.3	30KB
slick	1.8.1	43KB＋90KB（jQuery3.6.3）
Swiper	9.1.0	137KB

これを見れば分かる通り、Splideが圧倒的に小さいですね。

アクセシビリティに優れている

公式サイトのトップページのファーストビューに『アクセシビリティに配慮した軽量・高機能スライダー』と書いてある通り、アクセシビリティには非常に力を入れているようです。

バージョン4からはW3CのCarousel Design Patternに準拠した上で、スクリーンリーダーが動的にコンテンツを読み上げられるライブリージョンも導入されました。

アクセシビリティについては公式サイトのドキュメントで詳しく解説されています。

アクセシビリティ - Splide

公式ドキュメントが日本語

slickとSwiperが英語のみなのに対し、Splideは開発者が日本人なので公式ドキュメントが日本語となっています。

これは英語が苦手な人にとっては非常にありがたいですね。

Splide公式サイト

Splideのデメリット

利用者がまだ少ないので情報も少ない

スライダーと言えばまだslickやSwiperが有名なのでまだ使っている人は少なく、調べても情報が少ないというのがデメリットになります。

ただしメリットも多いので、Splideで実装できるならSplideを使った方がいいと言う人も多いと思います。

Splideの導入方法

それでは早速Splideを使ってスライダーを作っていきましょう。手順は以下のようになります。

必要なファイルをDLして読み込む or CDNでライブラリを読み込む
HTMLでスライダーを動かすのに必要なclassを付けながらコードを書く
JavaScriptを書く

あとは必要に応じてCSSで調整したりJavaScriptにオプションを書いていきます。

Splideのインストール方法①：CDNでライブラリを読み込む

Splideを使う方法はいくつかありますが、今回は『ファイルをDLする』か『CDNでライブラリを読み込む』の2つの方法をご紹介します。

まずはCDNの方ですが、以下のコードをheadタグとbody閉じタグ直前に書きます。

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

CSSの方はheadタグ、JavaScriptの方はbody閉じタグ直前に書きましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"
    />
  </head>
  <body>
    <main></main>
    <footer></footer>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
  </body>
</html>

CDNの最新バージョンはこちらに載っているので、コピーして使いましょう。

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

Splide：CDN

Splideのインストール方法②：ファイルをダウンロード

ファイルをDLして読み込みたい場合は、以下にアクセスしてファイルをダウンロードします。

https://github.com/Splidejs/splide

『Code』をクリックしてから『Dowmload ZIP』をクリックすればダウンロード出来ます。

Splide：ファイルダウンロード

ファイルを解凍するとこちらのファイルが入っています。

Splide：ファイル一覧

この中で使うのは以下の2つのファイルになります。

dist / css / splide-core.min.css
dist / js / splide.min.js

CSSファイルに関してはsplide.min.cssかsplide-core.min.cssになり、公式サイトでは以下のように解説されています。

スライダーの見た目を完全にカスタマイズしたい場合は、splide-core.min.cssを選ぶとよいでしょう。このファイルは必要最低限のスタイルしか含まれていないため、セレクタによる不要な上書き作業を避けることができます。そうでない場合は、splide.min.cssあるいはsplide-[theme].min.cssから選んでください。
引用元：基本的な使い方 - Splide

あとはCDNと同じように読み込めばOKです。

Splideの書き方

Splideを使う準備ができたら、次はコードを書いていきます。

HTMLの書き方

次はHTMLを書いていきます。

こちらが公式サイトに書いてある基本の形となります。

<section class="splide" aria-label="Splideの基本的なHTML">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

もしスライダーが装飾目的やメインコンテンツとならない場合（asideタグを使う要素）は、以下のように書きます。

<div class="splide" role="group" aria-label="Splideの基本的なHTML">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</div>

sectionタグ・ulタグ・liタグなどはdivタグにしても大丈夫ですが、class名を変えると動かないのでご注意ください。

またラベルに関しては以下のように解説されています。

マークアップの際、ルート要素には適切なラベルを記載してください。もしスライダーの説明として適切な、目に見える形で見出しが存在する場合は、aria-labelではなくaria-labelledbyを使用して両者を関連付けます。
引用元：HTML構造 - Splide公式サイト

『目に見える形の見出し』とはh2などのことですね。

<section class="splide" aria-labelledby="carousel-heading">
  <h2 id="carousel-heading">基本構造の例</h2>
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

CSSの書き方

これは書かなくても動きますが、とりあえず画像サイズだけ整えておきます。

.splide__slide img {
  height: auto;
  width: 100%;
}

JavaScriptの書き方

最後にJavaScriptを書きます。

これも一旦最小限のコードにします。

new Splide(".splide").mount();

ここまで書けたら一旦スライダーが機能するか試してみましょう。

こちらがここまでのコードで実装したスライダーです。

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

一応動いてはいるので、Swiperは正常に機能しているという確認が出来ました（横にスワイプ・ドラッグしてみて下さい）

あとはもう少しカスタマイズしてみましょう。

Splideでよく使うオプションとカスタマイズ方法

Splideにはたくさんのオプションがありますが、よく使うオプションをご紹介します。

基本的な書き方は以下になります。

new Splide(".splide", {
  オプション名1: 設定値,
  オプション名2: 設定値,
}).mount();

それではよく使うオプションをまとめて解説していきます。

最後にフェード以外全部設定したスライダーのデモを載せています。

また、オプションについては公式サイトも参照下さい。

ループ

デフォルトでは最後のスライドが表示されたら行き止まりなので、これをずっとスライドさせ続けるにはloopを設定する必要があります。

new Splide(".splide", {
  type: "loop", // デフォルトはスライド（slide）
}).mount();

最後のスライドの次は最初のスライドが表示されます。

自動再生

デフォルトでは自動再生されないので、させたい場合はオプションを書く必要があります。

new Splide(".splide", {
  autoplay: true, // 自動再生（デフォルトはfalse）
}).mount();

自動再生の間隔

自動再生の間隔をミリ秒で設定します。

デフォルトは5,000と少し長めになっています。

new Splide(".splide", {
  autoplay: true, // 自動再生
  interval: 2000, // 自動再生の間隔
}).mount();

当然自動再生を設定していないと意味のない設定となります。

スライダーの移動時間

これはスライダーが動いている時間になるので、長いほどゆっくり動き、0にするとパッと変わります。

単位はミリ秒で、デフォルトは400です。

new Splide(".splide", {
  speed: 1000, // スライダーの移動時間
}).mount();

フェード

スライドの切り替わりをスライドではなくフェードにする場合はtypeをfadeにします。

new Splide(".splide", {
  type: "fade", // フェード
}).mount();

しかしこれではループはせず、ループの設定もtypeだったのでどうすればいいかというと、rewindをtrueにすればOKです。

new Splide(".splide", {
  type: "fade", // フェード
  rewind: true, // スライダーの終わりまで行ったら先頭に巻き戻す（デフォルトはfalse）
}).mount();

レスポンシブ

これはブレイクポイントを指定してPCでは3枚、スマホでは1枚という感じで設定できます。

new Splide(".splide", {
  perPage: 3,
  breakpoints: {
    500: {
      perPage: 1,
    },
  },
}).mount();

この場合は画面幅が500px以上でスライド3枚、500px未満でスライド1枚になります（Swiperとは数字が逆なので注意）

そしてここまでの解説でフェード以外を全て取り入れたのがこちらです（パソコンでは左上のHTML・CSS・JSをクリックするとスライドが1枚になります）

See the Pen
Splide：色々設定 by junpei (@junpei-sugiyama)
on CodePen.

Splideが動かない時の主な原因と対処方法

最後にSplideが動かない時の主な原因と対処方法を解説します。

SplideのCSSとJavaScriptを読み込んでいない
ファイルを読み込む順番を間違えている
HTML、もしくはJavaScriptの片方しか書いていない
オプションの最後にカンマ（,）が抜けている
''（シングルクォーテーション）""（ダブルクォーテーション）が抜けている

SplideのCSSとJavaScriptを読み込んでいない

これはファイルをダウンロードして読み込むかCDNで読み込みますが、これを書いていない、もしくはコードやファイルへのパスが間違っている可能性があります。

ファイルをダウンロードして読み込む場合はファイルへのパスが合っているか確認しましょう。

CSSとJavaScriptのどちらかが無いと動かないので、そこも注意しましょう。

ファイルを読み込む順番を間違えている

SplideのCDNを読み込むコードと、自分でオプションなどを書いたファイルを読み込むコードがありますが、これは最初にCDNの方を読み込みましょう。

    <!-- SplideのCDNファイル -->
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
    <!-- Splideの設定ファイル -->
    <script src="js/main.js"></script>
  </body>
</html>

これが以下のようになっていると動きません。

    <!-- Splideの設定ファイル -->
    <script src="js/main.js"></script>    
    <!-- SplideのCDNファイル -->
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
  </body>
</html>

HTML、もしくはJavaScriptの片方しか書いていない

これは実装する物によりますが、例えばページネーションや矢印などはHTMLにコードを書く必要があります。

そしてJavaScriptにもコードを書く必要があるので、片方書いていないと動きません（もしくは表示されない）

class名を変更してしまっている

これは先ほど解説しましたが、class名は決められているので変更しないようにしましょう。

オプションの最後にカンマ（,）が抜けている

これは見落とす可能性が高いですが、オプションが複数ある場合は最後のオプション以外はカンマが必要です。

new Splide(".splide", {
  type: "fade",
  rewind: true
}).mount();

上記の場合はtype: "fade",の部分になります。

これが以下の場合だと動きません。

new Splide(".splide", {
  type: "fade"
  rewind: true
}).mount();

もしオプションが1つしかなければカンマはなくてもOKです。

new Splide(".splide", {
  type: "fade"
}).mount();

逆に最後のオプションにもカンマはあっても問題ないので、基本的には全てカンマを入れておいた方がミスは防ぎやすいかと思います。

new Splide(".splide", {
  type: "fade",
  rewind: true,
}).mount();

''（シングルクォーテーション）""（ダブルクォーテーション）が抜けている

オプションによってはシングルクォーテーションかダブルクォーテーションが必要な場合があります。

例えばエフェクトは以下のように書かないと動きません。

new Splide(".splide", {
  type: "fade",
}).mount();

このようにするとNGです。

new Splide(".splide", {
  type: fade,
}).mount();

他にもスペルミスや書き間違えがないか落ち着いて確認していきましょう。

まとめ

今回はSplideの導入方法・書き方など基本的な使い方について解説してきました。

少しご紹介したオプションなどを使えばかなり幅広い実装が可能です。

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。※ 4月15日に値上げ予定

コピペで使えるWordPressの各テンプレート
実務でよく使う見出し一覧
実務でよく使うテキストのhoverアニメーション
実務でよく使うボタン内の矢印9種類
Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

830部以上販売し、レビューは450件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら

【2023年最新】Splideの使い方とよく使うオプション・カスタマイズ方法を解説

Splideとはどんなライブラリ（プラグイン）か？

Splide・Swiper・slickの違いを比較

Splideのメリット

jQueryに依存しない

スワイプしやすい（slickに比べて）

容量が小さい

アクセシビリティに優れている

公式ドキュメントが日本語

Splideのデメリット

Splideの導入方法

Splideのインストール方法①：CDNでライブラリを読み込む

Splideのインストール方法②：ファイルをダウンロード

Splideの書き方

HTMLの書き方

CSSの書き方

JavaScriptの書き方

Splideでよく使うオプションとカスタマイズ方法

ループ

自動再生

自動再生の間隔

スライダーの移動時間

フェード

レスポンシブ

【Splide】ブレイクポイントを設定してレスポンシブ対応のスライダーを作る方法

Splideが動かない時の主な原因と対処方法

SplideのCSSとJavaScriptを読み込んでいない

ファイルを読み込む順番を間違えている

HTML、もしくはJavaScriptの片方しか書いていない

class名を変更してしまっている

オプションの最後にカンマ（,）が抜けている

''（シングルクォーテーション）""（ダブルクォーテーション）が抜けている

まとめ

【コピペで使える！】コーディング&WordPressメモまとめ集【無料特典あり🎁】※4月15日値上げ予定

コーディングとWordPressで月収30万円目指すWeb制作ロードマップ【独学のプログラミング学習方法から営業まで】

【徹底比較】ポートフォリオ用おすすめレンタルサーバー3選と選び方を解説

入って損なし！フリーナンスの即日払いの評判やフリーランスを守る無料の保険を徹底解説！

【独学・未経験者向け】Web制作で稼ぎたい人におすすめの教材をジャンル別に厳選紹介！