BLOG
Webエンジニア2025年新卒採⽤ BRISKは新卒からリモートワークです。

【最新バージョン4】Splideの使い方やオプションを解説!14個のデモ付き

更新日:2024/01/10

WEBサイトにスライダーを実装したことがある人は多いですよね。
そんなときいつも何を使用していますか?

スライダーのJSライブラリで有名どころとして以下の3つがあります。
slick
Swiper
keen-slider

私は今までslickを使っていました。
Swiperは機能がありすぎてよくわからないのと、slickよりも容量が重いからという理由もあります。

keen-sliderはカスタマイズ前提のライブラリで、アクセシビリティ(a11y)のサポートもされていないため使っていません。(slickとSwiperはアクセシビリティのサポートがされています。)

というような理由で、私はslick推しでした。

しかし、slickの操作感(いわゆるUX)があまり良くないと思っていました。
具体的には、マウスでドラッグしたときやスマホで指でスワイプしたときの動きが滑らかではないのです。

そんなとき、Splideというスライダーに出会いました。
Swiperのような滑らかな操作性があり、何といっても容量がめちゃくちゃ軽いのです。

しかも、調べてみるとslickでできることはだいたいSplideでもできるようです。そのため、slickではなくSplideを使ってみようと思いました。

ただ、本当に実務で使えるような柔軟性のあるライブラリなのかどうかを確かめないといけません。

そこで、こちらのSwiperで実装した記事のデモをSplideでも実装できるか検証してみたのがこの記事です。

結果として、Swiperの記事では15個デモがあるのですが、Swiperで実装している15個目のパララックスのデモ以外はSplideでも実装することができました。
Splideで作ったデモページを見る

Splideで実装してみて、Swiperの方が良いケースやそうじゃないケースなど色々わかったので、それについても解説していきたいと思います。

本記事では Splide v4.0.7(記事執筆時の最新)を使用しています。

目次

Splideってどんなプラグイン(ライブラリ)?

公式サイト
以下、Splideの特徴です。
これ以外にももちろんありますがいくつかピックアアップしました。

特徴

  • ・めちゃくちゃヒットしているらしい
  • ・他のライブラリに依存していない
  • ・ドキュメントが日本語
  • ・容量がめちゃくちゃ軽い
  • ・ドラッグ(スワイプ)したときの操作感が良い
  • ・アクセシビリティ(a11y)にも配慮した作りになっている
  • ・%やremなどの相対単位に対応

上記の特徴について簡単に説明します。

めちゃくちゃヒットしているらしい

Splideは現在、jsDelivr(CDN)において、月間3億ヒット以上するライブラリにまで成長しました✨
この数値はカルーセルライブラリとして有名なSwiperの3倍ですので、なかなか善戦しているのではないかと思います(もちろん、ライブラリの配信方法は様々ですので、及ばないところはまだまだあります)。Splideを選んでいただいた方々、そしてスポンサーの皆様、ありがとうございます!
引用元:バージョン4について – Splide

上記のとおり、かなり使われているようです。

ただ、この記事を書く前に他の方が書いている記事を参考にしようとしたのですがあまり無く、そのことがこの記事を書くモチベーションにもなりました(笑)。

他のライブラリに依存していない

slickであればjQueryに依存していますので必ずjQueryを読み込まないと動きません。
しかしSplideは他のライブラリに依存していないので、jQueryを読み込む必要がありません。

ドキュメントが日本語

Splideの開発者様が日本人であるためドキュメントが日本語です!
英語が苦手な日本人にとってかなりありがたいですね。
Swiperやslickなどは英語なので、何か調べようと思っても結局日本人が書いたブログ記事を読んでしまうんですよね(笑)

容量がめちゃくちゃ軽い

これはかなりいいポイントです!

jsファイルだけで比較すると、
slick(v1.8.0)はslick.min.jsファイルが42kBです。(jQueryに依存しているのでjQuery分を足すともっと増えます)
Swipe(v8.8.2)は、swiper-bundle.min.jsが142kBです
最後に、Splide(v4.0.7)は、splide.min.jsが29kBです。

この中で断トツで容量が軽いですね。最高です。

ドラッグ(スワイプ)したときの操作感が良い

Splideは操作感が良いです。Swiperと同じような心地よい操作感があります。
slickはあまり操作感が良くないのがデメリットだと感じていたのでこの点はかなりいいですね。

%やremなどの相対単位に対応

スライドの幅や高さは、Splideのオプションで設定でき、相対単位を使用することができます。
またこれは公式ドキュメントに書かれていませんが、CSSの比較関数(min,max,clamp)を指定することもできますのでかなり柔軟にスライドの幅と高さを制御することができます。

アクセシビリティ(a11y)にも配慮した作りになっている

slickやSwiperでも一応、アクセシビリティ(a11y)をサポートしています。
しかし、Splideのアクセシビリティ(a11y)への力の入れようは半端ないです。

【補足】
アクセシビリティのことをなぜa11y(またはA11Y)と略すのか、それはAccessibilityのAからYまでの間に11文字が挟まれているためです。
Accessibility (アクセシビリティ)

そもそも、なぜスライダーにアクセシビリティ対応をしないといけないのでしょうか?
公式ドキュメントには以下のように書かれています。

カルーセルUIは、Webサイトのコンテンツを少ないスペースで魅力的に表現できる一方、致命的なアクセシビリティの問題を抱えています。例えば「スライドを変更して新しく表示された内容を読む」という基本的な動作でさえ、スクリーンリーダのみを通して行おうとすると、途端に容易なものではなくなります。
引用元:アクセシビリティ – Splide

このような課題から、次のように説明しています。

Splideは、すべてのユーザが快適にスライダーを使えるよう、アクセシビリティの向上に努めています。バージョン4からは、W3CのCarousel Design Patternに準拠したうえで、スクリーンリーダーが動的にコンテンツを読み上げられるようライブリージョンも導入しました。
引用元:アクセシビリティ – Splide

なんという力の入れかた!

特に、Splide最新バージョンのv4から導入されたライブリージョン
これについては以下のように説明されています。

非表示のスライドが表示された際、新たに表示されたコンテンツをスクリーンリーダーを通して読み取るのは、決して容易なことではありません。我々はそれを視覚情報を頼りに認識できますが、聴覚あるいは点字による情報に頼っているユーザにとって、ボタンとは別の場所が動的に更新されてしまうスライダーは、とても扱いにくい存在です。

これを解決するための最大の武器が、ほかならぬライブリージョンなのですが、(略)
引用元:アクセシビリティ – Splide

どうやらかなり難しい技術だということがわかります。
このような難しい技術にも、「すべてのユーザが快適にスライダーを使えるようにしたい」という想いのもと積極的に取り組まれているのがSplideなのです。

アクセシビリティについて、より詳しくは公式ドキュメントを参照してください。

アクセシビリティについて

Splideの導入方法

Splide導入のためには3つの方法があります。

01 Splideのインストール

以下の3つの方法でインストールが可能です。

  • NPMでインストール
  • CDNを利用
  • ファイルをダウンロードして利用

この記事では3つ目の「ファイルをダウンロードして利用」のやり方で導入する手順についてご紹介します。
その他の方法については、公式サイト 基本的な使い方をご確認ください。

ファイルをダウンロードする場合

GitHubに移動し、ソースコード一式をダウンロードします。

手順は以下の通りです。

①「Code」をクリック。
②「Download ZIP」をクリック。
ファイルをダウンロードする場合

ダウンロードしたzipファイルを解凍すると以下のようなフォルダやファイルを確認することができます。
ファイルをダウンロードする場合

このうち、以下のファイルを使用します。
・dist/css/splide-core.min.css
・dist/js/splide.min.js

cssはいくつか種類がありますが、スライダーの見た目を完全にカスタマイズしたい場合はsplide-core.min.cssを使うといいでしょう。

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

ダウンロードしたファイルをHTMLで読み込む

02 HTMLにスライド要素を追加

上記が基本の作りです。
公式サイトではsplide__listsplide__slideulliタグですが、divタグでも問題ありません。

.splide .splide__track .splide__list .splide__slide4つは必須です。

また、HTMLの構成には制限があります。
次の3点が守られていればどのような構成でも問題なく動きます。
※初見だとすぐ理解できないと思うので落ち着いて読んでみてください。

  • splide__tracksplide__listには任意の要素を追加することはできない。
  • splide__listsplide__trackの直下の子要素でなければいけない。
  • splide__slidesplide__listの直下の子要素でなければいけない。

そのため、以下のような構成は正しく動作しません。

違反しているルール

  • splide__tracksplide__listには任意の要素を追加することはできない。

以下の構造は正しく動作します。

このほかに、aria-labelなどの簡単なラベルをつける必要があります。
Splideがアクセシビリティを強く意識している点がうかがえますね。

これについては公式ドキュメントに詳しく記載がありますのでそちらを参考にしてください。
基本的な使い方

03 JSでスライダーの初期化を行う

このように書くことでスライダーが動き出します。
.mount()を呼ばないと全く動かないし、何も表示されないので注意してください。

次のように、Splideクラスをインスタンス化してからmountメソッドを呼んで初期化することも可能です。
このように書くことで初期化の前に色々な処理を挟んだり、処理を登録することができるので、基本的にはこの書き方が良いと思います。

もし、ページ内に複数のスライダーがある場合は1つずつインスタンスを作成する必要があります。

あるいは、以下のようにまとめて初期化することもできます。

04 CSSでデザイン調整を行う

最後に、CSSでデザイン調整をします。
本記事では、splide-core.min.cssを読み込みましたが、これだと必要最低限のスタイルしか当たらないので、ご自身でスタイル調整する必要があります。
この後紹介する「HTML基本構造とクラス名」なども参考に、検証ツールを開いて、クラスにスタイルをあてていきましょう!

HTML基本構造とクラス名

HTML構造については公式ドキュメント紹介されています。
ただ、図解としての説明はないので、この記事では視覚的にわかりやすいように解説します。

この図解で記載している各クラス名はオプションで指定すれば任意のクラス名に変えることもできますが、本記事では全てデフォルトのままという前提で説明しています。

公式ドキュメントと照らし合わせながら読むとより理解が深まるでしょう。

Splide Basic HTML

.splide スライダー全体を囲むコンテナです。
.splide__track このエリア内にスライド要素が収まります。
はみ出させたい場合は overflow: visible; で上書きします。
.splide__list .splide__list(各スライド)を囲む要素です。
これを transform で移動させることでスライダーの動きを実現しています。
.splide__list の直下には .splide__slide だけを入れます。
.splide__slide この中に各スライドの要素を入れます。
デザインを調整する際、.splide__slide に直接スタイルを当ててもいいですが、
以下のように中身を囲う要素を作って、それに対してスタイルを当てるのがお勧めです。

<div class="splide__slide">
  <div class="item">
    <img src="img.jpg" alt="">
    <p class="text">テキストが入ります</p>
  </div>
</div>
.splide__pagination ページネーション
出力されるHTMLについての詳細はこちら: ページネーションの調整
.splide__arrow–prev |
.splide__arrow–prev
矢印
それぞれのボタンには共通のクラス名として、.splide__arrowが付与されます。
また、前のスライド / 次のスライドがないときには、disabled属性が付与されます。
出力されるHTMLについての詳細はこちら:矢印の調整

.splide__track > .splide__list > .splide__slideの構造は守る必要がありますが、ページネーションや矢印ボタンは、.splide__trackの外に出しても動作します。
.splideの外には出せません。

ここで、.splide__slideに付与されるクラス名をもう少し詳しく見てみましょう。
Splide Basic HTML

.is-prev 前のスライドにつくクラス名。
.is-next 次のスライドにつくクラス名。
.is-active アクティブ状態のスライドにつくクラス名。
.is-visible .splide__trackに含まれるスライドにつくクラス名。

これらのクラス名は、スライドの状況によって動的に変わるクラス名で、.splide__slideに対して付与されます。

例えば、「アクティブなスライドは明るくして、そうではないスライドは暗くする」とった場合、
アクティブなスライドにはis-activeが付与されるので、これを利用してCSSで調整などを行います。

この記事で扱うデモの基本的なHTML構造

この記事のデモのHTML構造では、.splide__trackの親要素として.splide-wrapperを挟んでいます。

そして、.splide-wrapperに対してposition:relative;を共通のスタイルとして付与しています。

理由は、矢印を.splide__trackに対して上下中央に配置するためです。

この点を心に留めて読んでいただければと思います。

もし矢印をトラックを基準として上下中央に揃えたい場合、relativeポジションを持った任意の要素の中にプレースホルダを配置することで実現できます。
これは、スライダーがトグルボタンなどほかのコントロールを持っている場合に効果を発揮します。
引用元:矢印の調整 – Splide

#01 基本 基本のスライダー

それではここから各デモの解説に入っていきます。

まずはよく見る以下のようなスライダーです。
基本のスライダー

このデモですが、Swiperのデモと違う点があります。
それは、PCサイズ(1025px以上)のときスライダーが1枚ずつ移動するのではなく、4枚ずつ移動する点です。
※正確には4枚ずつ移動したあと、2枚移動する。

なぜこのようにしているかについて後ほど詳しく解説しますが、
結論、Swiperのデモのように1枚ずつ移動させたいのであれば、Swiperで実装したほうがいいです。

デモのポイント

  1. 矢印をスライドに対して上下中央揃えにする
  2. 矢印をカスタマイズする
  3. ホバー効果でスライドを動かしたり、影を付けたりする場合の調整

■使用しているオプション

オプション タイプ デフォルト値 説明
mediaQuery string ‘max’ ブレークポイントの検出に用いられるメディアクエリに対して、min-widthmax-widthのどちらを使うかを指定します。
‘min’:min-widthを使用する。
perPage number 1 1ページに何枚のスライドを表示するかを指定します。正の整数で指定し、小数の値は指定しないでください。
gap number | string スライド間の余白を指定します。1emなどの相対単位を指定することも可能です。
breakpoints object

ブレークポイントごとにオプションを変更する。

< 例 >640px以下でスライドの数を4枚から2枚にする

{
  perPage: 4,
  breakpoints: {
    640: {
      perPage: 2,
    },
  }
}

< 例 >640px以上でスライドの数を2枚から4枚にする

{
  mediaQuery: ‘min’,
  perPage: 4,
    breakpoints: {
    640: {
      perPage: 2,
    },
  }
}

■使用しているメソッド

メソッド 説明
mount インスタンスを初期化します。拡張のためのエクステンションや、トランジションコンポーネントを渡すことができます。

矢印をスライドに対して上下中央揃えにする

矢印をスライドに対して上下中央揃えにする
ページネーションがあると、ページネーションを含んだ高さに対して矢印が上下中央配置されてしまいす。
そのためページネーションの位置を.splide__trackの外から出します。
こうすることで、スライドの高さに対して上下中央配置されます。

矢印をカスタマイズする

矢印(.splide__arrows)は.splide__trackの直近の親要素に配置されます。
このデモサイトの場合は.splide__trackの直近の親要素は.splide-wrapperなので、以下の位置に配置されます。

.splide__arrowsの中身は次のようなHTMLが生成されます。

デフォルトでは、矢印のアイコンがsvgで表現されます。
これを別のパスに変えたい場合は、オプションのarrowPathに、別のSVGコードを設定します。

ただ、SVGではなく別の画像ファイルに変更したい場合もありますよね。
そのような場合は、以下のように、arrowPathに空文字にすれば消せると思いきや…消せません。

解決方法としては、①CSSで消す。②HTMLに矢印用のHTMLを直接書く。という方法があげられます。

①CSSで消す場合

このように強制的に消し、.splide__arrowに対して疑似要素などで画像を配置すればOKです。

②HTMLに矢印用のHTMLを直接書く

このように、直接書けばsvgタグは生成されないので、cssで消す必要はありません。
あとは.splide__arrowに対して疑似要素などで画像を配置すればOKです。

ここは正直、オプションでsvgを消せるようにしてほしいですね。。

また、.splide__arrowsを、.splide__trackよりも後に置くこともできますが、これはしないようにしましょう。

このようにすると、画像の上に矢印があるスライダーの場合、矢印が一瞬スライダーの下にもぐるよう