お問い合わせ・無料相談
WEBのこと 2024.05.31

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

WRITER
Sasayama Sayaka ディレクター
Sasayama Sayaka

ディレクター。ウェブデザイン技能士(2級)/HTML5プロフェッショナル認定資格 レベル1・レベル2。

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

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

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

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

使いやすいスライダープラグイン2選「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/

JOURNALが気に入ったら「いいね」してね!

Contact

ブランディング・WEB制作・運用まで、まずは一度お話を聞かせてください。 初回のご相談は無料で承っています。

お電話

0120-622835

10:00〜18:00 / 土日祝休

メールフォーム

お問い合わせはこちら