こんにちは！デザイナーのasaです。

皆さんwebサイトのスライダーはどうやって作ってますか？自作で作っている強者の方もいるかもしれませんが、やはりメジャーどころでいくと「Swiper」や「slick」あたりのライブラリを使用している人が多いのではないでしょうか。

私自身はこれまでほぼ「Swiper」一択でした。「slick」はJQuery依存であったり、2017年以降更新されていないこともあって使っていません。「Swiper」は機能も豊富でいろいろカスタマイズもでき便利なんですが、容量が重いのが常々気になっていました。あと公式サイトが英語というのもあり少々使いづらいなども。

そんななか新たにスライダーを使う案件があり、以前から気になっていたスライダーライブラリ「Splide」を使ってみることに。先に感想をお伝えすると、もう今後使うのスライダーライブラリはこれでいいのでは？というぐらい使い勝手よかったです。

ということで今回はその「Splide」をご紹介します。

Splideの特徴

Splideの大きな特徴は以下のとおり。

• JQueryなど他のライブラリに依存しない
• ファイルが軽量
• 開発者が日本人
• アクセシビリティを考慮

JQueryなど他のライブラリに依存しない

先ほども触れたように「slick」はJQueryに依存しているためJQueryを読み込んでいないと機能しませんが、「Splide」は非依存なので単体で動きます。この点は「Swiper」と同じですね。私は基本的にjQueryを使わないバニラJS派なのでこれはありがたいです。

ファイルが軽量

なんといってもファイルが軽い。普段「Swiper」を使っていますが、Googleのpagespeed insightsで読み込みに時間がかかっているJSとしてよく目にしていました。
JSファイルの比較は以下のとおり

 
見ての通り「Splide」一番軽いです。これだけでも使う価値ありかなと。

開発者が日本人

開発者が日本人のため、公式サイトも当然日本語対応。しかも説明が丁寧で、サイト自体がかなり質の良いマニュアルとなっています。
実際使ってみるとこの部分はかなり大きかったです。改めて日本語の有り難みを感じました。

アクセシビリティを考慮

近年よく話題にでてくるアクセシビリティ。webアクセシビリティが義務化されるやされないなどよく取り上げられています。
正直アクセシビリティついてはそこまで詳しくないので把握できていない部分が多いのですが、公式サイトをみる限りかなり力入れているがわかります。

Splideの使い方

基本的なスライドなら問題なく使えます。動きも滑らかで、使い勝手はよかったです。
ただしスライドのエフェクトが「Swiper」が7種類あるのに対して、「Splide」は通常の「スライド」と「フェード」だけとなってます。またパララックス効果を入れようとするとうまくいかないようなので、凝った動きを実装したいなら「Swiper」を使った方がいいかもしれません。
とはいえ普通に使う分には十分ですし最近はcssで何でも出来るようになってきているので、うまく組み合わせて使ってみるといいんじゃないでしょうか。

ここから実際の使い方について紹介します。

Splideの導入方法

インストール方法は4つあります。好きなやり方で試してみてください。

• NPMを利用する
• ファイルをダウンロードする
• CDNを利用する
• インテグレーション用パッケージ（React、Vue等ライブラリやフレームワーク用）

 
詳しくはこちらを参照

HTML&JSを記述する

基本のHTMLの記述は以下の通り

<section class="splide" aria-label="Splideの基本的なHTML">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

 
続いてjsです。

new Splide( '.splide' ).mount()

とりあえずこれで動きます。ここからオプションを追加してカスタマイズしてください。
使用頻度の高そうなオプションは以下のとおりです。

 
他にもいろいろとオプションはあるので、詳しく知りたい方はこちらを参照ください。

Splideを使った一例

const Splide = new Splide(".splide", {
    autoplay: true, // 自動再生
    type: "loop", // スライダーのタイプは”loop”
    perPage: 3, // 1ページに3枚のスライドを表示
    perMove: 1, // 1度の移動で、1枚のスライドを移動
    gap: 40, // スライド間に40pxの余白
    pauseOnHover: false, // カーソルが乗ってもスクロールを停止させない
    pagination: false, // ページネーションを非表示
    interval: 3000, // 自動再生の間隔3秒
    speed: 1000, // スライダーの移動時間１秒

    breakpoints: {
      767: { // 767px以下の場合の挙動
        perPage: 1.5,
        gap: 20,
      }
    }
  }).mount();

注意点

公式サイトにも書いてありますが、autoplay（自動再生）をオンにしていてもデバイスやブラウザ側でアニメーション使用制限や視覚効果の制限などの設定がされていると自動再生がオフに書き換えられるようです。
 
アニメーションやトランジションなどの効果に対して頭痛や吐き気を感じる人もいるため、アクセシビリティの観点からデバイスの設定で制御されるようになっています。もしautoplayをオンにしているのに動かない場合は一度デバイス側の設定を確認してみてください。

まとめ

何度も言いますがかなり好印象のライブラリで、今後新規のスライダーは「Splide」を優先的に使っていこうと思ってます。基本は「Splide」で、凝ったスライドを実装したい場合は「Swiper」で、と使い分けるのがいいんではないでしょうか。
日本製のライブラリっていうのがポイントも高く、公式サイトの説明が充実しているのでとてもわかりやすかったです。もしまだ使ったことがなければ一度使ってみてください。

また弊社ではWEBやDTPの制作からマーケティングまでワンストップで対応していますので、お気軽にお問い合わせください。