軽量で多機能・アクセシビリティも配慮したスライダーが作成できる「splide」

ウィブ制作では画像をスライドで表示させる「スライダー」を頻繁に利用します。

以前このような記事を投稿しました。

使いやすいスライダープラグイン２選「slick」「Swiper」紹介

使いやすいスライダープラグイン２選「slick」「Swiper」紹介

かずさんの書かれた「bxSlider」スライダーを紹介する記事もよろしければ！

便乗してスライダーのご紹介

今も基本的に私は「Swiper」を利用しているのですが、
最近、さらに使いやすいのでは……？　と感じるスライダーを見つけたのでご紹介します。

jquery不要の軽量・高機能スライダー「Splide」

「Splide」はjquery不要、そして非常に軽量で使いやすいスライダーです。

jqueryが不要な点は「Swiper」も同じですが、「Splide」はソースが「Swiper」よりも軽く、
さらにマニュアルが日本語なのがとてもわかりやすいです。

また、自動再生を有効にする場合の「停止・再生」ボタンを設置できるなど、アクセシビリティに対する考慮もされています。
アクセシビリティ｜splide

他にも「スライドの複数設置方法」や「サムネイルスライダー」など、
よく使うスライド機能もマニュアルにわかりやすくコード付きでサンプルが載っているので迷うことなく使うことがきます。

「Splide」の使い方紹介

公式のマニュアルが充実しているので非常にわかりやすいです。
導入方法から、個人的に需要が多いと思う機能の公式ページのリンクを紹介します。

https://ja.splidejs.com/guides/getting-started/

https://ja.splidejs.com/guides/getting-started/#%E8%A4%87%E6%95%B0%E3%81%AE%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC

https://ja.splidejs.com/guides/autoplay/

https://ja.splidejs.com/tutorials/thumbnail-carousel/

「Splide」
https://ja.splidejs.com/