簡単・軽量な国産JSスライダーSplideの使い方とカスタマイズ方法

Share

Splideとは?

Splide.jsは、日本発の軽量かつ高機能なJavaScriptスライダープラグインです。シンプルなコードで美しいスライダーを実装できるため、多くの開発者に愛用されています。
ファイルサイズが29KBとかなり軽く、ドキュメントも日本語のため便利です。
また、jQueryではなくjavascriptで開発されているため、例えば既存のプロジェクトにスライダーを追加する場合など、jQueryの有無やバージョンを気にする必要が無いため導入しやすいと思います。
オプションやAPIに関しても、他のスライダープラグインにできることは大体Splideでもできる、という印象です。

Splide.jsの基本的な使い方

まずは、Splide.jsを導入する方法を紹介します。公式サイトから最新のライブラリをダウンロードするか、CDNを利用して簡単にセットアップできます。

HTML
HTML

CDNを利用して読み込む場合は以下

HTML

デフォルトで組み込むとこんな感じ

よく使うオプション設定方法

一般的によく使うと思われるオプションをまとめました。

JavaScript
typeスライダーのタイプ
‘slide’
一般的なスライダー。最後のスライドになると止まるのであまり使わないような..
‘loop’
ループ(カルーセル)スライダー。こちらの方がよく使いそう。
‘fade’
各スライドをフェードにより切り替える。perPageと併用不可
autoplay自動再生を有効にするかどうか
perPage1ページに表示するスライド数を設定
speedスライダーの移動時間(アニメーション速度)をミリ秒単位で指定
interval自動再生の間隔をミリ秒単位で指定
arrows矢印ボタンを表示するかどうか
paginationページネーション(ドット)を表示するかどうか
pauseOnHoverマウスオーバーしたときに自動再生を停止するかどうかを決定
easinglinear, ease, cubic-bezier()など、CSSトランジションに使用するタイミング関数を指定。

その他オプションはこちらから

ページネーション、矢印のカスタマイズ方法

次に、ページネーションと矢印のカスタマイズ方法について説明します。

JavaScript

classesオプションで、Splide側で生成された矢印やページネーションに対して、自由にクラス名を追加できます。あとはCSS側で好きなようにスタイルを変更します。
splide__という接頭子をもったクラスはデフォルトのクラス名で、こちらは残したまま、右にyour-class-arrowsといった自分のスタイルを定義していきます。

直接HTMLを追加する方法もある

上記の方法では、デフォルトの矢印を強引にdisplay:none;などして消した後にオリジナルのスタイルを定義する必要があり、あまりスマートではありません。こんな時は、直接HTMLを与えて独自の矢印を設定することができます。

HTML

ウィンドウ幅に応じてオプションを変更する

スマホ時とPC時でオプションの値を変更したいケースは多いと思います。breakpointsオプションを設定してレスポンシブ対応することが可能です。

JavaScript

スライダーを複数設置する場合

スライダーを複数設置したい場合は、このように書きます。

JavaScript

【注意点】iOSでautoplayが効かない原因と対策

iphoneの設定で「視差効果を減らす」をオンにしていると、その端末でautoplayが動作しません。
(設定 > アクセシビリティ > 動作 > 視差効果を減らす)

公式ドキュメンによると

ユーザの中には、アニメーションやトランジションなどの効果に対して、頭痛や吐き気を感じる人もいます(たとえば前庭運動障害を患うユーザなど)。Splideは、prefers-reduced-motion: reduceを検出した際
・speedとrewindSpeedを0で上書きます
・autoplayをpausedで上書き、再生ボタンを押さない限り自動再生が行われないように変更します

これはSplideがアクセシビリティへの意識が高いが故におこる事であり、動作しないほうがユーザーにとっては快適なのかもしれません。しかしながら、矢印やページネーションを設定していない場合、次のスライドを見る術がなくなってしまいます。こういった理由から、どうしても動かしたい場合もあるかと思います。
そんな時は、reducedMotion オプションを設定して、停止処理を書き換えることができます。

JavaScript

これで「視差効果を減らす」をオンにした端末でもautoplayが動作します。

Share