結局スライダーライブラリは何が良いのか

昨今では様々なスライダーアプリがありますが、どれが良いかは一長一短です。私自身迷うことがあったのでよく使用されるライブラリを調査してメリット、デメリットをまとめてみました。

スライダーの選定の参考になれば幸いです。

◼️Slick

JQueryベースのスライダーライブラリ、シンプルな記述で多機能なスライダーを実装できます

【メリット】

1. 導入が簡単

HTMLとjQuery数行で動作します

2. 豊富な機能

自動再生・無限ループ・タッチ対応等複数の機能がある

3. center表示でエラーが起きない

代表的なライブラリの一つSwiperではcenter表示で左右の画像をはみださせたい時。2枚以下だとエラーが発生しますが、slickでは問題なく表示できます

【デメリット】

1. jQuery依存

jQueryが必須のため。モダン構成では重くなる

2. 開発停止

最新更新は2017年でメンテナンス終了

3. 無限ループの縦スライドの挙動がおかしい

左が通常の縦スライド、右が縦の逆向きスライドです。
あまり縦スライドにはむいてないようです。

◼️Swiper

jQuery不要のモダンなスライダー

【メリット】

1.  jQuery不要

純粋なjavascriptで動作

2. フレームワーク対応

React / Vue / Angularの公式コンポーネントあり

3. ドキュメントが充実している

公式ドキュメントや日本語の情報が多く学習しやすい

【デメリット】

1. ループ時のスライド枚数制限

スライド枚数が3枚以下だとloop処理時にエラーが出る

2. ファイルサイズがやや重め

全機能込みだと比較的多くなるので必要なモジュールだけ読み込む工夫が必要

◼️Splide

日本人が開発した軽量、高機能スライダー

【メリット】

1. 軽量

他のスライダーと比較してかなり軽量

2. アクセシビリティ対応

WAI - ARIA準拠でスクリーンリーダーにも配慮

3. 公式ドキュメントが日本語

日本人が作成したこともあり公式ドキュメントが日本語で学習しやすいです

4. 拡張性

プラグイン機能で機能が拡張できることにより、不要なデータを読み込む必要性がない。

【デメリット】

1. 知名度

Swier,slickと比較して知名度が少ないので情報が少ない

2. エフェクトの少なさ

Swiperのような3D,パララックスなど派手なエフェクトは少ない

結局どれがいいのか？

個人的にはSplideが良いと思いますが知名度が少ない分、他の技術者が操作した時に、swiper,slickの方が馴染み深いのでつまづく心配性が低いかなと感じます。

基本的にはSplideを主軸に使用していき、派手なエフェクト等をしたい場合はSwiperを使用する。といった使い分けが良さそうです。