ブログ

「splide」使ってみた話

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

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

Splideとは？

• 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を読み込むことも可能。アプリコットのような制作会社だと、基本このあたりはデザイナーのデザインに合わせる感じになりますね。

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

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

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

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

フェード

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

終わりに

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