
Web制作ではスライダーの実装は非常に良くある実装の1つです。
このブログではslickやSwiperというプラグインを使った実装を多くご紹介していますが、もう一つおすすめのスライダーライブラリがSplideになります。
今回はSplideを使った基本的なスライダーの実装方法を解説していきます。
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のメリット
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に準拠した上で、スクリーンリーダーが動的にコンテンツを読み上げられるライブリージョンも導入されました。
アクセシビリティについては公式サイトのドキュメントで詳しく解説されています。
公式ドキュメントが日本語
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を使用して両者を関連付けます。
『目に見える形の見出し』とは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が動かない時の主な原因と対処方法を解説します。
- 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の導入方法・書き方など基本的な使い方について解説してきました。
少しご紹介したオプションなどを使えばかなり幅広い実装が可能です。
以上になります。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
今だけ!5大無料特典あり🎁