トップページ > ブログ > 「splide」使ってみた話

BLOG

ブログ

UPDATE:2023.5.23

CATEGORY

「splide」使ってみた話

こんにちは、こばです。

以前さやさんやかずさんがスライダーライブラリの紹介をしていましたが、更に便乗してのご紹介。
今回紹介するのは同じスライダーライブラリの「splide」です。
スライダーライブラリといえば有名なのは「slick」「swpier」あたりですね。こちらの2つは以前さやさんが紹介しています。

▼さやさんのブログ
使いやすいスライダープラグイン2選「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.jsswiper-bandle.min.jssplide.min.js
    ファイルサイズ42KB + 87KB
    ※87KBはjQuery(v3.7)
    140KB30KB

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

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

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

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

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

とりあえず作ってみた

まずは基本のスライダー

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


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

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


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

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


フェード

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



終わりに

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


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

それではまた!

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE