はじめに

Webページ制作において、スライダーの登場頻度は異常に高いですよね。
cssでanimationプロパティを書くより、スライダーを実装する方が多いまであります。

その上、地味に仕様決めをちゃんとしておかないと、後であーだこーだなって実装コストが高くなることも往々にしてあるかと思います。

そのため、大体の仕様を満たすことができるようにライブラリを使って実装している方がほとんどかと思います。

そして、そのスライダーライブラリのデファクトスタンダードとなっているのが、slickとSwiperでしょう。

そこに第三の選択肢として、Splideを推したいのです。

Qiitaで「Splide」と検索しても意外と記事がなかったので、おすすめポイントをまとめてみたいと思います。

Splideとは

Splideは、MITライセンス下でリリースされたアクセシビリティに配慮された軽量で高機能なスライダーライブラリです。

記事執筆時のバージョン：4.0.0

特長

1. アクセシビリティに考慮

SplideのHPではa11yが前面に押し出されてる印象を受けるため、かなりこだわって作られていることが推察できます。

Splideでは、W3C¹ WAI内で示されているCarousels Tutorialに沿ってアクセシビリティの向上が図られています。

スライダー自体がユーザビリティ低下問題で議論がなされていますが、アクセシビリティを高めることでユーザビリティが高まるとされ、以下の4つを満たすことでアクセシブルなスライダーを実装できるとしています。

カルーセルの動きが速すぎたり、文字が読みにくくて気が散ることがあるため、ユーザーが一時停止できるようにする
カルーセルのアイテム間の移動を含むすべての機能は、キーボードで操作できる
カルーセルの項目の変更を、スクリーンリーダー利用者を含むすべての利用者に通知する
キーボードでのフォーカス操作が合理的かつ理解しやすい方法で管理されている

Users must be able to pause carousel movement because it can be too fast or distracting, making text hard to read.

All functionality, including navigating between carousel items, must be operable by keyboard.

Changes to carousel items must be communicated to all users, including screen reader users.

The keyboard position (“focus”) is managed in a reasonable and comprehensible fashion.

What makes a carousel accessible? 原文ママ

Splideではこれらを満たすように設計されていますが、唯一「アクティブスライドの通知」は未対応です。
これは「いちいちスクリーンリーダが読み上げるのはうるさい（特に自動再生時）」という理由によるもので、拡張機能を実装することで対応することができるようになっています。

また、ライブリージョンが標準搭載されています。

ライブリージョンとは、DOMが動的に変更される箇所をスクリーンリーダなどの支援技術に伝えることができる領域のことです。
これによって、スライドした後の要素も支援技術が認識することが出来るようになります。

ここに記載したのはごく一部です。
こちらでぜひ詳細をご確認ください。Splideくん、凄すぎる。

2. 他ライブラリに依存なし

slickはjQuery依存ですが、Splideは他ライブラリに依存しません。

3. 軽量

minifyされたJavaScriptは~~27KB~~ 29KBで、CoreCSSを合わせても~~30KB~~ 32KBと軽量です。(v4アップデートにより2KB増加)

Swiperはバンドル版で139KB、slickは43KB(+jQuery)で、この中では最軽量です。

4. 相対単位に対応

%やremという相対単位に対応しています。

slickはpx、%、Swiperはpxに対応しています。

5. 多くのメソッド・イベントに対応

Swiperに存在する多くのメソッド・イベントはSplideにもほぼ存在します。

スライダーの状態取得

const splide = new Splide('.splide');

if (splide.state.is(Splide.STATES.IDLE)) {
  // 何かの処理
}

スライダーの同期

const primary = new Splide('#primary');
const secondary = new Splide('#secondary');

primary.sync(secondary);
primary.mount();
secondary.mount();

スライドの移動

const splide = new Splide('.splide');
splide.mount();

// スライド1に移動:
splide.go(1);

// 現インデックスに2足したスライドに移動:
splide.go('+2');

// 次のページに移動:
splide.go('>');

// ページ2に移動:
splide.go('>2');

スライドが終了したときに何かを行う

const splide = new Splide('.splide').mount();

splide.on('move', function() {
  // 何かの処理
} );

6. ドキュメントが日本語対応

本ライブラリの開発者は日本人の方なので、ドキュメントが日本語完全対応です。
英語アレルギーがある方も抵抗なく学習できると思います。

slickは割と個人サイトなどで解説されていたりするので良いですが、SwiperのAPIドキュメントはフル英語なので、欲しい機能を探すときに敷居が高く感じてしまう方も多くいらっしゃったと思います。
その点Splideは詳しい説明も日本語なので嬉しいですね。

slick / SwiperにあってSplideに無いもの

それでは、逆に他ライブラリにあってSplideには無いもの、つまり他と比較したときの短所を探してみます。

まず、slickと比べてですが、恐らくslickにあるものはSplideにあります。

次にSwiperですが、主に演出の手軽さでSwiperに軍配が上がりそうです。
Splideになさそうな機能は以下の通りです。

第三勢力 keen-sliderはまた志向が違う

最近keen-sliderというライブラリを耳にすることがあります。

こちらも軽量スライダーライブラリ(14KB)で、依存なし、モバイルフレンドリーですが、カスタマイズが前提のライブラリです。
コアライブラリを用いることでこんな感じのいろいろなものが作れるよーと、Examplesに様々な作例があります。

軽量さではこちらの方が上ですが、a11yについては際立った記載がなく、個人的にはその点でこのライブラリを用いる理由がなく、故に今回は比較対象とはしませんでした。

Splideを推す理由

導入・実装の手軽さ

導入はnpm、CDN、ホスティングから選択でき、実装時も他のライブラリと遜色ありません。

// slick
$('.slick').slick();

// Swiper
new Swiper('.swiper');

// Splide
new Splide('.splide').mount();

軽量

ひとつのWebサイトでいろいろなライブラリを用いることは珍しくありません。
そのため、ひとつひとつのライブラリが軽いことに越したことはありません。

アクセシビリティへの意識の高さ

前述の通り、W3Cの指針に沿っており、バージョン3へのアップデート時もアクセシビリティ向上を一つの目標として制作されており、今後もa11y対応が続いていくことが期待されます。

slickに取って代わる

GitHubのmasterブランチを見ると、slickの最終更新はVer1.8.0の2022年3月現在から見て約4年前の2017年9月12日となっています。

1.9.0がrevertされているようで、npmでは1.8.1が最終バージョンとなっており、それにしても4年前の2017年10月3日なので移り変わりが激しいWeb界隈では太古と言っても過言ではないのではないでしょうか。（その分完成されているとも言えるのかもしれませんが）

「手軽さ」という利点でslickが長らく使われてきたように思います。

その背景にはjQueryが普及していた当時の状況も根強く関係しているのでしょう。
今となっては「脱jQuery」などと毛嫌いされることも珍しくはありません。

手軽さ、a11yの観点から、Splideはslickに取って代わる存在なのではと感じています。

Splideの選定基準

以上、いろいろ書き連ねてまいりましたが、実際にスライダーを実装するときにはどのようにライブラリを選定するか私の考えを示します。

まず、slickは選択肢に入ることはもうないでしょう。
jQueryが既にプロジェクトに組み込まれていたとしても、ファイルサイズがSplideの方が小さく済むためです。

続いて、SwiperかSplideかですが、特別な理由がない限りSwiperも選びません。
どちらも同じような機能を備えていますし、a11yも考慮されているため、あとは軽量さと相対単位が使えるという点が魅力なのでSplideを使用します。

前述の通り、Swiperは最初から使える機能がSplideより多い印象です。その機能を手軽に利用したいときに選択肢に入りそうです。

まとめ

ここまで全力でSplideを推してまいりました。

Splideは他ライブラリに依存しないa11y対応されている・軽量・高機能な不足のないスライダーである！

Splideは、今のところ第一候補として積極的に使っていきたいスライダーです。

使っていく中で、実はここはSwiperの方がいいかもという面が見えてくるかもしれませんので、その際はまた追記していきます。

ぜひ皆さんも候補に入れてみませんか？

Web技術の標準化を行う非営利団体 ↩

Splideをスライダーの新たな定番としたく