BLOG

【最新バージョン4】Splideの使い方を徹底解説!-14個のデモ付き-

更新日:2022/07/25

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. ホバー効果でスライドを動かしたり、影を付けたりする場合の調整

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

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

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

< 例 >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よりも後に置くこともできますが、これはしないようにしましょう。

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

■参考
矢印の調整
ページネーションの調整

ホバー効果でスライドを動かしたり、影を付けたりする場合の調整

ホバー効果でスライドを動かしたり、影を付けたりする場合の調整

このデモでは、スライダーにホバーしたとき上に16px動かす効果を付けています。
ただ、「ホバーしたらスライドの位置を16px上へ」というCSSだけ書いても上手くいきません。

理由は、.splide__track.overflow: hidden;がかかっているからです。

それを解決するために、.splide__trackに、はみ出す分だけpaddingを付けておくようにします。

このデモでは16px上にはみ出させたいので、.splide__trackに、padding-top: 16px;を付けています。

なぜ4枚ずつ移動させているのか?

4枚ずつと言っていますが、最初に矢印を押したときは4枚移動し、次に矢印を押したときは2枚だけ移動して最後のスライドまで表示される形です。
これは特にこちらで何かオリジナルのスクリプトを書いているというわけではなく、Splide側でそのようにしています。

さて、なぜこのデモは4枚ずつ移動するようにしているのかについて説明します。

まず、このデモを作成するにあたり最初、オプションを以下のように設定していました。

Swiperのデモでは、1025px以上のときにslidesPerViewを4にしていたので、
Splideでは1025pxのときperPageを4にしています。

ただ、それだけだと1枚ずつ移動しません。そのため、perMoveというオプションを設定し、値を1とすることで1枚ずつ移動するようにしました。
上記のオプションをもとに作成されたデモが以下になります。
ソースを見る

1枚ずつ動くのでイイ感じに見えますが、ページネーションの数が3つのままです。
また、ページネーションをクリックしたときの挙動が、矢印を押したときの挙動と異なるため違和感があります。

そこで、ページネーションの数をスライドの数分出すように調整したのが以下のオプションです。

focusというオプションを新たに追加し、値をcenterとするとページネーションの数がスライドの数分になります。
このオプションをもとに作成したデモが以下になります。
ソースを見る

見ていただくとわかるように、矢印を押してもスライドが移動せずページネーションのアクティブだけ変わる時があり、動きが微妙です。
もちろん、アクティブなスライドのときはそのスライドを明るくするなどの対策があるかもしれませんが、デザイン上それができないときもあるので不採用としました。

このような経緯から、perMoveや、focusは指定せず、perPageのみ指定するようにしました。

調べてみたところ、同じような指定(見えるスライドの数が4枚で1枚ずつ移動する)をした場合、
Swiperとslickは、矢印を押したときにスライドが動かない分についてはページネーションを表示せずイイ感じの動きになりました。
そのため、「見えるスライドの数が4枚で、1枚ずつ移動するスライダーで、ページネーションを押したときもイイ感じに動かしたい」という場合は、Swiperで実装したほうが楽です。
※slickでもいいですがやはり操作感に関してSwiperが勝るため。

#02 基本 右側だけはみ出た形のスライダー

次は、初期状態で右側だけはみ出たスライダーです。
右側だけはみ出た形のスライダー

デモのポイント

  1. 初期状態で右側だけコンテンツ幅からはみ出る
  2. スライドの横幅を固定値(px)にする
  3. 矢印とページネーションを横並びにする
  4. どのスライドが選択されているのかわかるようにする

オプションタイプデフォルト値説明
mediaQuerystring‘max’ ブレークポイントの検出に用いられるメディアクエリに対して、min-widthmax-widthのどちらを使うかを指定します。
‘min’:min-widthを使用する。
perMovenumber 1度の移動で、何枚のスライドを移動するかを指定します。正の整数で指定し、小数の値は指定しないでください。
fixedWidthnumber | string 各スライドの幅を固定します。CSSの相対単位を指定することも可能です。この値を設定した場合、perPageオプションは無視されます。
gapnumber | string スライド間の余白を指定します。1emなどの相対単位を指定することも可能です。
updateOnMovebooleanfalse is-activeクラスをスライドの移動前に更新するかどうかを決定します。
breakpointsobject

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

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

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

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

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

■使用しているメソッド

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

初期状態で右側だけコンテンツ幅からはみ出る


これは以下のようにCSSで調整すれば簡単にできます。

頑張ってmargin-leftなどを使ってやろうとすると上手くいかないので注意しましょう。

スライドの横幅を固定値(px)にする

perPageでスライド数を指定すると、コンテナのサイズに応じてスライドのサイズも動的に変わる形になります。
そうではなく、「どの画面幅でも常に〇pxにしたい」という場合は、fixedWidthを使用します。

▼重要な部分だけ抜粋

fixedWidthには相対値も指定することができます。
また、ここで指定した値は、.splide__slideにインラインスタイルでstyle=”width: 360px;”という形で付与されます。

そのため、比較関数を指定して書くこともできます。

このように、fixedWidthを使えばかなり柔軟にスライドの幅を指定することができるので、スライドの幅を変えたい場合は基本的にJS側で制御するのが楽でおすすめです。

もしCSSで各スライドの横幅を指定したい場合は、autoWidthtrueにするとCSSで変更できるようになります。
ただし、autoWidthtrueにすると、fixedWidthは機能しなくなるので注意してください。
fixedWidthを使いたいのであれば、autoWidthfalseにするか、そもそもオプションに記述しないようにしましょう。

▼参照
autoWidth

矢印とページネーションを横並びにする

このデモでは、.splide__paginationと、.splide__arrowを、.splide-controllerで囲み、それに対してdisplay:flexを適用して横並べにしています。

どのスライドが選択されているのかわかるようにする

デモではアクティブ状態ではないスライドは少し暗くして、現在アクティブ状態のスライドは明るくすることでわかりやすくしています。
これはCSSで対応可能です。

スライドがアクティブ状態になると、is-activeクラスが.splide__slideに付与されるのでそれを利用します。

【補足】矢印を押したときのページネーションとスライドの挙動について

ここで、Swiperで作成したデモと見比べてみましょう。

右矢印を7回押しときのページネーションの動き方とスライドの動き方を比べてみてください。

Swiperの方は、7回矢印を押すだけで最後のスライドまで到達し、Splideの方はスライドの総数分の10回押さないとページネーションが最後まで到達しません。

これはSwiperがとても優秀で、「もう最後のスライドまで見えてるし10回押さなくてもいいよね!」ということでページネーションの数と、矢印を押す回数を減らしてくれています。

Splideはその点、真面目に10個分押す必要があるわけです。

でも別に気にならないと思いましたか?
それはSplideのデモでは分かりやすいように、アクティブスライドを明るくしているからです。

これを、Swiperのデモのように、アクティブスライドは明るくしないと以下のようになります。

ソースを見る

ご覧の通り、7回目以降に右矢印を押しても、ページネーションのアクティブは変わりますが、それに対応するアクティブなスライドが全く分かりません。

このように、「全部のスライドの明るさは同じ」というデザインの場合はどうすればいいでしょうか?

このようなときは、Swiperで実装することをお勧めします。
理由は、Swiperのデモを見ての通り、そちらの方がわかりやすいからです。

#03 基本 コンテンツ幅からはみ出たスライドを薄くする

コンテンツ幅からはみ出たスライドを薄くする

これもよく見るスライダーですね!

結論から言うと、これはSwiperで作った方がいいです。
Swiperで作った場合のデモは以下です。
Swiperで作ったデモを見る
Swiperで作ったデモとSplideで作ったデモを見比べると、スライドが明るくなったり暗くなる動きが、Swiperの方が違和感なくスムーズです。
Splideで作成した場合は、スライドが動いたあと少し遅延して明るくなったり暗くなります。

これは、is-visibleクラスの付け外しが、スライドが動いた後に付け外しされるためです。
Swiperの場合は、.swiper-slide-visibleクラスが、スライドが動くのと同時に付け外しされるので滑らかに見えるというわけです。

Splideでは、.is-activeについては、スライドが動く直前に付け外しできるようなオプションがありますが、.is-visibleに関しては、そのようなオプションが無いので今のところこれが限界という感じです。

これについてはSplideにupdateVisibleOnMoveみたいなオプションが追加されることを期待します。

デモのポイント

  1. 自動再生させる
  2. 無限ループさせる
  3. コンテンツ幅からはみ出たスライドを薄くする

自動再生させる

オプションタイプデフォルト値説明
autoplaybooleanfalse 自動再生を有効にするかどうかを決定します。
intervalnumber5000 自動再生の間隔をミリ秒単位で指定します。
speednumber400 スライダーの移動時間をミリ秒単位で指定します。
0を指定すると、アニメーションなしで直接対象に遷移します。
pauseOnFocusbooleantrue スライダー内にフォーカスされたエレメントがある場合、自動再生を停止するかどうかを決定します。

このデモでは、pauseOnFocusfalseにしています。
このようにすることで、ユーザーがドラッグなどの操作をしても自動再生が止まらないようになります。
ただ、公式ドキュメントではアクセシビリティの観点から、pauseOnFocustrueにしておくと良いとされています。

無限ループさせる

オプションタイプデフォルト値説明
typestring‘slide’ スライダーの種類を指定します。

slide: 一般的なスライドアニメーションによるスライダー
loop: ループ(カルーセル)スライダー
fade: 各スライドをフェードにより切り替える。このオプションはperPageと併用不可

コンテンツ幅からはみ出たスライドを薄くする

.splide__trackの中にあるスライド(.splide__slide)に、.is-visibleが付与されるのでこのクラスを利用します。

CSSで以下のように書けばOKです。

ただ、先ほどもお伝えした通り、スライドが動ききった後に.is-visibleの付け外しが行われるので、少し遅延してスライドが明るくなったり暗くなります。

#04 基本 ブレークポイント切り替えでSPだけスライダーにする

デモのポイント

  1. スライダーの解除↔再初期化を行う
  2. スライダーが初期化されていないときのスタイル調整を行う

こちらはSwiperよりもとてつもなく簡単に実装できます。

オプションタイプデフォルト値説明
destroyboolean スライダーを破棄するかどうかを決定します。

true: 破棄するが、引き続きブレークポイントを監視する
false: 完全にスライダーを破棄する

destroytrueに設定すると、完全に破棄されず、ブレイクポイントを引き続き監視して、ブレイクポイント通過時だけ破棄するということが可能になります。

これでスライダーの解除と再初期化は実現可能です。とても簡単ですね。

スライダーが初期化されていないときのスタイル調整を行う

スライダーが初期化されたとき、div.splideに、.is-activeクラスが付与されるのでこれを利用します。

おなじくdiv.splide.is-initializedというクラスが付与されますがこれは使いません。
なぜなら、destroyしたときもdiv.splideに付与され続けるため、スライダーが活性状態なのか非活性状態なのかが分からないからです。

#05 応用 総スライド数が perPage を超える時だけスライダーにする

このデモが先ほどのデモと違う点は、「ブレイクポイント視点」ではなく、「スライドの枚数視点」というところです。

スライドの総スライド数が、perPageよりよりも多い時、つまり「総スライド数 > perPage」のときだけスライダーにするというデモです。

方針としては、予めブレークポイントと perPage のセットを配列に格納しておき、総スライド数と比較してスライダーの解除↔初期化を切り替えるという形をとっています。
ブレークポイントがさらに多い場合も、Splideのオプション(breakpoints)と配列にそれぞれ追加すれば対応できるので柔軟性があります。

デモのポイント

  1. ブレークポイントと perPage のセットを配列に格納
  2. スライダーの解除↔再初期化を行う
  3. スライダーが初期化されていないときのスタイル調整を行う

ブレークポイントと perPage のセットを配列に格納

まずブレークポイントと perPage のセットを配列に格納しておきます。
breakpoints.reverse() をしているのは、Splideのオプション(breakpoints)の指定順と、配列の順番を揃えたかったためです。

スライダーの解除↔再初期化を行う

インスタンスメソッド引数デフォルト値説明
destroy boolean true trueの場合、breakpointsでの再マントも行われなくなり、完全に破棄される。

上記の41行目が特にポイントです。
40行目でdestroy()を実行していますが、これだけだとブレイクポイントを監視してくれません。

41行目のrefresh()をさらに呼び出すことで、一度破棄されたあとも引き続きブレイクポイントを監視し、再マウントされるようになります。

■参考
refresh

ちなみに、なぜ#04応用のようにbreakpointsプロパティ内でdestroyを指定しないかというと、この実装は、「breakpointsの違いによってスライダーを破棄するかしないか」ではなく、「スライドの枚数がperPageより多いか少ないか」を基準に考えているためです。

そのため、breakpointsプロパティのオプションでdestroyするのではなく、Splideインスタンスのメソッドとして実行する必要があります。

つまり、オプションのdestroyを使うのではなく、インスタンスメソッドのdestroyおよびrefreshを使う必要があります。

※destroyはオプションとしてもありますが、インスタンスメソッドとしても存在しています。
インスタンスメソッドはAPIsというドキュメントにまとまっているので詳しくは以下を参考にしてください。
APIs

スライダーが初期化されていないときのスタイル調整を行う

スライダーがアクティブなときはis-activeが付くので、それを利用してスタイル調整を行います。

#06 基礎 ゆっくり動き続ける無限ループスライダー

スライドの動きがずーっと止まらずに一定の速度で動き続けるタイプのデモです。

Splideの場合、その動きを「自動スクロール」と呼んでおり、Auto Scrollエクステンションという拡張機能を別途読み込む必要があります。

デモのポイント

  1. ゆっくり動き続けるようにする
  2. ホバーしたら他のスライドを薄くする

ゆっくり動き続けるようにする(準備編)

先ほどもお伝えしたとおり、Splideにはずーっと動き続ける自動スクロールを実装するためには拡張機能を使用します。
まずはそのための準備をしましょう。

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

それでは早速、拡張機能を使用するための準備をしていきましょう。
いくつか読み込む方法がありますが、今回はjsファイルをダウンロードして読み込む手順について見ていきましょう。

まずはGitHubに移動します。

手順は以下の通りです。

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

ダウンロードしたzipファイルを解凍すると以下のようなフォルダやファイルを確認することができます。
ファイルをダウンロードする
このうち、以下のファイルを使用します。
・dist/js/splide-extension-auto-scroll.min.js

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

これで準備完了です。

ゆっくり動き続けるようにする(実行編)

このデモでは上記のスクリプトを書いています。
自動スクロールで重要なポイントは以下の部分です。

まず、mountする際に、引数にwindow.splide.Extensionsを渡すことで自動スクロールが有効化されます。

自動スクロールが有効化されると、autoScrollオプションを使用することができます。

このデモでは以下のようにして使用しています。

autoScrollを通して変更できるオプションは以下です。

オプションタイプデフォルト値説明
speednumber1 スクロールの速度を「アニメーションフレーム当たりのピクセル」で決定します。
自動スクロールのスピードを遅くしたい場合は小さい数字を指定します。
autoStartbooleantrue 初期化後、自動的にスクロールを開始するかどうかを決定します。
pauseOnHoverbooleantrue スライダーの上にマウスカーソルが乗ったとき、スクロールを停止するかどうかを決定します。
pauseOnFocusbooleantrue スライダー内にフォーカスされた要素がある場合、スクロールを停止するかどうかを決定します。

ホバーしたら他のスライドを薄くする

CSSの疑似クラス:notを使い、ホバーしたときにホバーしていないスライドはopacityを下げています。
このようにすることで、1つのスライドだけを目立たせ、注目させることができますね。

#07 基本 サムネイル(スライダー)を付けて連動させる

サムネイル(スライダー)を付けて連動させる

結論から言うと、これはSwiperで作った方がいいです。
Swiperで作った場合のデモは以下です。
Swiperで作ったデモを見る

大きな違いは、サムネイル下にあるスクロールバーです。
Swiperの場合は、scrollbarというオプションがあるためそれを利用していますが、Splideにはそれに相当するオプションがありません。

そのため自分でスクリプトを書く必要があります。
また、Swiperではそのスクロールバーをドラッグして移動させることができますが、Splideの場合はできません。(もちろん自分で頑張ってスクリプトを書けばできるかもですが…)

なので、もしSwiperのようなデモを作りたいのであれば、Swiperで実装したほうが圧倒的に楽です。

スクロールバーとしてではなく、単純に現在地表示用のバーを実装したいのであればSplideで可能です。
このデモでは、ページネーションのスタイルを変更してそれっぽくなるように表現していますが、Swiperのようにマウスで掴んで移動ができません。

似たようなものにこちらのスライダーの現在地表示があります。

ただこれだと、このデモと相性があまりよくありません。
理由は、バーの端がずっと左にあるので、サムネイルの2枚目以降をクリックしたときに、「これ以上左側にスライドがないのかな?」とユーザーを混乱させてしまう恐れがあります。

もちろん、メインスライダーに矢印があるのでわかるかもしれませんが、サムネイルスライダーだけを見ているユーザーもいるため、なるべくSwiperのデモのようにしたほうがユーザーに優しいUIでしょう。

デモのポイント

  1. 2つのスライダーを連動させる
  2. スライダーの現在地表示
  3. スライドが切り替わったらサムネイル画像を明るくする

2つのスライダーを連動させる

まず、サムネイル画像用のスライダーとメイン画像用スライダーのSplideインスタンスをそれぞれ作成します。(thumbSplideと、mainSplide

次に、mainSplidesyncメソッドを使用して、メソッドの引数にthumbSplideを渡し実行します。

最後に、両方のインスタンスをmountします。

これで2つのスライダーが同期します。

注意点としては、syncを実行するタイミングは、mountよりも前ということです。

■参考
サムネイルスライダー

スライダーの現在地表示

似たようなものにこちらのスライダーの現在地表示があります。

しかし、前述したようにこれだとこのデモとは相性が悪いので、ページネーションのスタイルを調整してそれっぽく表現しています。

スライドが切り替わったらサムネイル画像を明るくする

アクティブスライドが切り替わると、is-activeが切り替わるのでそれを利用します。
スライドが切り替わったあとすぐにスライドを明るくするためには、updateOnMovetrueにしましょう。
falseだと、スライドが切り替わったあと少し遅延してスライドが明るくなります。

#08 応用 サムネイル(非スライダー)を付けて連動

サムネイル(非スライダー)を付けて連動

先ほどのデモはサムネイルもスライダーになっていたので、メインスライダーが変わると、サムネイルの位置も変わりましたね。
そうではなく、このデモはサムネイルをスライダーにしません。

これはありがたいことに公式ドキュメントにそのままサンプルコードがありますのでそれを使用します。
詳しい説明は公式ドキュメントをご参照ください。
■参考
ギャラリー

ちなみに、上記の26行目部分の「Splide#index」という意味についてですが、Splideインスタンスのメソッドのindexメソッドという意味です。

#09 基礎 スライダーの向きを交互に変える

スライダーの向きを交互に変える

このデモは、2つのスライダーが逆方向に無限ループするスライダーです。

これはそこまで難しくありません。
Splideには、スライドの向きを変更するオプションがありますので、それを利用すればOKです。

デモのポイント

  1. スライダーの進行方向を逆にする
  2. 同じオプションをまとめる
  3. ホバーしたときにスライドの横幅を大きくする
  4. スマホサイズのときはスピードを変える

スライダーの進行方向を逆にする

directionプロパティを‘rtl’にすると、右から左方向にスライドが移動します。
‘ltr’にすると、左から右へスライドが移動します。

この後説明する、共通オプションを管理している変数のcommonOptionsに、左方向用のオプションと、右方向用のオプションをそれぞれスプレッド構文を用いてマージしています。

オプションタイプデフォルト値説明
directionstringなし スライダーの方向を指定します。
‘ltr’左から右
‘rtl’右から左
‘ttb’上から下

ちなみに、‘ltr’は、「left to right」の略だと思われます。
同様に、‘rtl’は、「right to left」、
‘ttb’は、おそらく、「top to bottom」の略です。

同じオプションをまとめる

2つのスライダーは、スライドの向きが違うだけで、それ以外のオプションは共通です。
そのため、共通オプションとして変数に入れておくと管理がしやすいでしょう。

上記のように、共通オプションをまとめておき、
次のように、JSのスプレッド構文を用いてマージしています。

■参考
スプレッド構文

ホバーしたときにスライドの横幅を大きくする

このデモでは、スライドのwidthheightをSplideのオプションで設定していません。
代わりに、autoWidthautoHeighttrueにしています。

このようにすることで、スライドのwidthheightをCSSで調整することができるようになります。

CSSで調整しなくても、fixedWidthfixedHeightというオプションがあるので、それを使いたい気持ちになるのですが、これを使うとスライドにホバーしたときに、スライドのwidthが伸びません。

そのため、今回はCSSで調整しています。

スマホサイズのときはスピードを変える

自動スクロールの流れるスピードの早さは、speedオプションの値で決まります。
デフォルトでは1ですが、この値を小さい値にすると遅くなります。

ただ、デフォルトの1だとスマホで見たときにとても早く感じます。

そんな時は、breakpointsオプションを使って、その中でautoScrollspeedを上書きします。

このデモでは、600px以下でspeedを0.3にして遅くしています。

#10 応用スライダーを入れ子にする

スライダーを入れ子にする

結論から言うと、これはSwiperで作った方がいいです。
Splideでも入れ子にできるのですが、親と子のスライド方向が同じ場合うまく動かないです。

Swiperだと、nested:trueとすることで、親と子のスライド方向が一緒の場合の誤作動を防ぐことができますが、Splideに同様のオプションがありません。

そのため、このデモでは子スライドはドラッグできないようにdrag:falseに設定し、子スライダーの移動はページネーションで移動させるようにしました。

公式ドキュメントにも「ネスト」というデモが紹介されていますが、ネストされている子スライドにもページネーションが入っているのはおそらくそういうことなんでしょう。

デモのポイント

  1. スライダーを入れ子にする
  2. ページネーションの出力内容をカスタマイズする

スライダーを入れ子にする

このように、親スライダーと子スライダーをそのまま入れ子構造に、JSでそれぞれmountするだけで実装できます。
ただ、前述のとおり、子のスライダーにもページネーションを付けているため若干コード量が多くなっています。

ページネーションの出力内容をカスタマイズする

スライド上にある「STEP01」などのページネーションについてです。

まず、このページネーションを出力する位置の関係で、HTML上に以下の様に場所を指定しています。

そして、JSで調整を行います。

Splideのページネーションは公式ドキュメントにもある通り、以下のようなHTMLを出力します。
※一部抜粋

ご覧の通り、.is-activeが、liタグに付かず、buttonタグにつきます。

このデモでは、liタグにもis-activeを付与しないと実装が難しいので、スクリプトで書く必要があります。

具体的には、以下で実装しています。

ちなみに、Swiperはページネーションの親要素の、直下の子要素(つまりSplideでいうとliタグ)に、.swiper-pagination-bulletが付与されるので、制御しやすく実装がはるかに容易です。

結論、このデモに関しては、Swiperの方がコード量も少なく実装できるのでSwiperがおすすめです。

Swiperで作ったデモを見る

#11 基本メインビジュアル フェードアニメーション

各スライドはフェードで切り替わり、スライド内の画像はフェードイン、テキストはブラーがかかった状態から鮮明になるようなアニメーションを備えたデモとなっています。

デモのポイント

  1. フェードアニメーション+ループスライダー

フェードモードにするためには、type:’fade’にする必要があります。
また、自動再生したいのでautoplay:trueにしています。

ただ、これだけだとスライダーがループしません。
そのため、rewindtrueにします。

Splideの場合、ループスライダーを実装するためにはtype:’loop’と設定する必要があり、同じオプションのtypeを使うため、「フェードモード+ループスライダーは不可能では?」と思ったのですが、rewindtrueにすればできるということに気づくまで時間がかかりました。。

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

オプションタイプデフォルト値説明
typestring‘slide’ スライダーの種類を指定します。

slide: 一般的なスライドアニメーションによるスライダー
loop: ループ(カルーセル)スライダー
fade: 各スライドをフェードにより切り替える。このオプションはperPageと併用不可


rewind
booleanfalse スライダーの終わりまで行ったときに、先頭に巻き戻せるかどうかを決定します。
intervalnumber5000 自動再生の間隔をミリ秒単位で指定します。
speednumber400 スライダーの移動時間をミリ秒単位で指定します。
0を指定すると、アニメーションなしで直接対象に遷移します。

また、このデモでは画像がフェードインして、テキストがブラーがかかった状態から鮮明になるようなアニメーションをCSSで付けています。
具体的には、以下のようにして調整しています。

上記の7行目がポイントです。
これがないと画像のフェードインが、スライドが切り替わった際に変な挙動になってしまいます。

#12 応用始めと終わりで別々のアニメーションを付ける

このデモは、各スライダーがアクティブになったとき、テキストが下から上にフェードインして、次のスライドに切り替わる際には上に移動しながらフェードアウトします。

CSSであらかじめ.anm-startedanm-finishedが付いたときの挙動を記載しておきます。
CSSを見ての通り、.anm-startedが付いたときに、タイトルやテキスト、リンクといったコンテンツにmv02-fadeInというアニメーションが実行されるようになっていますね。

mv02-fadeInは、初期状態では画面下方向に6rem移動した位置にあり、アニメーション完了状態では元の位置に戻るようなアニメーションとなっています。

一方、.anm-finishedが付いたときに実行されるアニメーションである、mv02-fadeOutは、初期状態では元の位置にあり、アニメーション完了状態では画面上方向に6rem移動した位置になるようなアニメーションとなっています。

このようにアニメーションを作っておき、あとはJSでこれらのクラスを特定のタイミングで付けたり外したりすればいいわけですね。

【余談】
SwiperのslideChangeイベントに相当するSplideのイベントがmoveで、slideChangeTransitionStartに相当するSplideのイベントがactiveです。

#13 応用 縦方向のスライダー

縦方向のスライダー

縦方向スライダーもたまに見かけますよね。
実装する際の注意点としては、.splide__track への高さ指定が必須となります。

スライダーの方向を縦方向にするために、direction‘ttb’にしています。
これは「top to bottom」の略です。(おそらく)

縦方向にした場合、スライダーの高さを指定する必要があります。

このデモでは、サムネイルのスライダーに関しては、heightRatioを1.25にして指定しています。

メインスライダーに関しては、heightを800にして、ビューポートが1024px以下の場合はheight: ‘clamp(400px,70vh, 600px)’としています。

このように、heightを相対値で指定できたり、CSSの比較関数(この例だとclamp)を指定できるのでかなり指定が楽な印象です。

これらのheightに関する指定は、DOMのsplide__trackに指定されるようになっているので、詳しくは検証ツールでご確認ください。

また、メインスライダーとサムネイルスライダーを連動させるために、syncを使っています。
これは#07のデモで登場しましたのでここでは説明を割愛します。

#14 応用 スライドごとに表示時間を変えて、進捗状況と連動したプログレスバーを作成する

スライドごとに表示時間を変えて、進捗状況と連動したプログレスバーを作成する

スライドごとに表示時間を変えたい場合もあるでしょう。
ただ、それだけではなく、プログレスバーなどのアニメーションも、スライドの表示時間に合わせたいはずです。

デモのポイント

  1. スライドごとに表示時間(delay)を変える
  2. 進捗状況と連動したアニメーション(プログレスバー)

スライドごとに表示時間(delay)を変える

通常、スライドの表示時間はintervalを指定します。
個別に表示時間を設定したいときは、.splide__slidedata-splide-intervalを指定します。
値の単位はミリ秒です。

■参考
interval

進捗状況と連動したアニメーション(プログレスバー)

スライド下にあるプログレスバーは、スライダー全体の進捗率を表しており、progressbarで表現しています。
円形ラインは、各スライドの進捗率を表しており、.slide-fractionで表現しています。

スライダーの表示時間と連動させるために、以下で調整を行っています。

円形ラインについてはSVGで作成しています。
このあたりの知識は以下の記事を参考に理解を深めてみてください。
HTMLとCSSで作るインフォグラフィック(円/棒グラフ・レーダーチャート)【アニメーションつき】
このデモはSplideで作ってもSwiperで作ってもどちらでもいいと思います。
ただ、Splideで作った場合のデメリットは、.slide-titlemin-heightをつけないと、各スライドで高さがちぐはぐになってしまう点です。

Swiperの場合は、fadeモードにしても、display:flex;が指定された親要素の中に各スライドが配置されるので、各スライドの中身が異なっていたとしても、一律に高さが揃います。

しかし、Splideの場合はそうなりません。
なので、たとえば.slide-titlemin-heightを指定しないと
以下のような挙動になります。
スマホサイズにしてご確認ください。
min-heightを指定しない場合

このようにちぐはぐなスライドになるので、min-heightを指定する必要があります。
そのため、.slide-titleの文章量には当然制限が生まれ、ある行数以上は3点リードにするなどの対策が必要になります。

まとめ

Splideが実務でも十分につかえるのか?という観点で、Swiperの記事で実装しているデモをSplideに置き換えてみました。

結論、Swiperで実装したほうがいいデモは以下の3つでした。
#03 基本 コンテンツ幅からはみ出たスライドを薄くする
#07 基本 サムネイル(スライダー)を付けて連動させる
#10 基本 スライダーを入れ子にする

そして、Swiperの記事では実装していた15個目のデモは、Splideでは実装できませんでした。

改めてSwiperの凄さを実感したとともに、Splideでも十分実務で使えると感じました。

Splideの魅力は、やはり容量がめっちゃ軽いことです。

今やサイトスピードもSEOに関わってきます。
SEOだけでなく、ユーザー側も当然、サイトがすぐ表示された方が好印象をもつでしょう。

そのため、Splideで実装できるならSplideを選択し、そうでないならSwiperという選択が良さそうだと感じました。

SplideはGitHubでIssuesが立てられ、その後何週間かしたあとアップデートされていますので開発が盛んです。
今後もおそらく新しいオプションなどが追加されると思いますので注視していきたいと思います。

『まだslick使っている』という方はぜひ、この記事を通してSplideを使ってみてはいかがでしょうか。

どうしても実装できなかったパララックスのデモ

最後に、Swiperの記事で実装していたパララックスのデモ、これがなぜSplideでできなかったのか簡単に触れておきます。

このデモの仕組みは、前のスライドおよび次のスライドの画像を、現在アクティブなスライドの中央側にtransform:translateXで移動させておき、スライドの箱(div.slide)の移動距離よりも画像の移動距離を小さくすることで奥行を感じさせてパララックスを演出しています。

ただ、Splideの場合、スライドの箱(div.slide)と画像が一緒に動いてしまい以下の動画のようになってしまいました。。

動画を見ていただくとわかるように、最初に次のスライドのimgがアクティブなスライドの中央側に寄っています。
次に、スライドが動くと同時にimgも左方向に一緒に動き、ぬるっと元の位置に戻ります。そのため右端に隙間ができて変な動きになっています。

Swiperのデモのほうでは、imgはスライドの箱と一緒に動かず、残りの移動距離分だけしか動かないので右端に隙間ができません。

このSplideのデモに関しては色々試したのですがどうもうまくという感じでギブアップしてしまいました。。

FOLLOW US