「splide」使ってみた話

こんにちは、こばです。

以前さやさんやかずさんがスライダーライブラリの紹介をしていましたが、更に便乗してのご紹介。
今回紹介するのは同じスライダーライブラリの「splide」です。

スライダーライブラリといえば有名なのは「slick」「swpier」あたりですね。こちらの２つは以前さやさんが紹介しています。

▼さやさんのブログ

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

その他お客様の要望によって、違うものを使うこともあります。かずさんのブログでも紹介がありました。

▼かずさんのブログ

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

Splideとは？

「Splide」も上記と同じスライダーライブラリです。
ここまでずっとSwiperを好んで使っていましたが、「なんかいいらしい」という情報を受け、特徴を調べてみました。

• jQuery非依存

  はい、この時点で使ってみるの決定。脱jQuery派としてはこれだけで高評価です。脱jQueryについては以前さやさんがブログで書いていました。

  【コーダーの独り言】脱jQueryまでの長い道のり

• とにかく軽い

  圧縮したjsファイルの容量がなんと30KB！！軽ッッ！！！

  slick,swiperとの比較

  ライブラリ名	slick（v1.8.1）	swiper（v9.3.2）	splide（v4.1.3）
  スクリプトファイル名	slick.min.js	swiper-bandle.min.js	splide.min.js
  ファイルサイズ	42KB + 87KB ※87KBはjQuery（v3.7）	140KB	30KB

  slick自体のファイルは軽量ですが、jQueryに依存してので実際は130KBになります。
  そう考えると主要ライブラリよりも圧倒的に軽い！！！

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

  swiper、slickのドキュメントは英語。ただメジャーな分、解説記事も豊富です。
  splideの方は開発者は日本の方らしく、ドキュメントも日本語です。
  swiper,slickに比べると解説記事は少ないようですが、ちょっと凝ったカスタマイズをする時に参考にする公式ドキュメントが日本語なのは、助かりますね！

• アクセシビリティに優れている

  Splideは**Webアクセシビリティ(a11y)**に対応しているライブラリとのこと。
  このあたりは僕もまだ詳しくないのでちゃんとした説明ができませんが・・・優れているそうです（丸投げ）

とりあえず作ってみた

まずは基本のスライダー

超がつくほどベーシックなスライドから。css,jsの読み込みとjsの記述1行でここまでできます。矢印やページネーションはテーマcssを読み込むことも可能。アプリコットのような制作会社だと、基本このあたりはデザイナーのデザインに合わせる感じになりますね。

See the Pen
splide by koba-ottoworks (@koba-ottoworks)
on CodePen.

自動スライドとループをオン、スライドの速度を1秒に変更

こちらもよく使うやつですね。

See the Pen
splide02 by koba-ottoworks (@koba-ottoworks)
on CodePen.

無限スライド・流れるスライダー

流れるスライダーを作るには、別途拡張機能ライブラリを読み込む必要がありました。しかしこちらも5KBと軽量。

See the Pen
splide04 by koba-ottoworks (@koba-ottoworks)
on CodePen.

フェード

ファーストビューなどでよく使われるフェードのスライダー

See the Pen
splide03 by koba-ottoworks (@koba-ottoworks)
on CodePen.

終わりに

基礎中の基礎スライダーだけ制作しましたが、やはり公式ドキュメントが日本語なのは大きい！
まだまだいろんなことができるようなので興味のある方は下記の公式サイトへ！

しばらくスライダーライブラリの第一候補になりそうです。

それではまた！