Zenn
🦄

Splidejsつかってみました

2023/02/28に公開
CSS
HTML
JavaScript
#
slider
tech

スライダーのプラグイン何使ってますか？
最近はSwiperを使っていることが多かったのですが、Splideがいいらしいと聞いて使ってみることにしました。
https://ja.splidejs.com/

Splideのメリット

とにかく軽い！

js css
Swiper(9.0.5) 136KB 18KB
Splide(4.1.4) 30KB 2KB

個人的には、Swiperだけで重さを感じることはないのですが、できるだけ軽い方が嬉しい。笑
ちなみにjsもcssも、一番コンパクトに圧縮されてるものなので、Swiperでオプションを使うともっと重くなるはず。
(いつのまにか最新版9.0までいってたのね、Swiper...)

日本語ドキュメント

Swiperでも探せばあったりしますが、私はバージョンに振り回されがちなので、公式ドキュメントに日本語あるのは安心感〜⭕️

操作性

カクついたりせず、スムーズです。
イマイチだったらSwiperに戻ろうと思ったのですが、いい具合です。操作性大事。

ライブラリ依存なし

数年前はSlickとかも使ってたのですが、脱jQueryしたくて、Swiperに乗り換えたりもしました。
ライブラリ依存してないプラグインのほうが導入しやすいし、バグも生みにくいと思います。

アクセシビリティ

スライダー自体、アクセシビリティ・ユーザビリティがよくないと言われたりもしますが、考慮して作られているそう。
トップページでも「アクセシビリティに配慮した」って言ってるし、アクセシビリティのページもある。
https://ja.splidejs.com/guides/accessibility/
こだわりを感じる。

実装方法

公式のドキュメントがめちゃくちゃわかりやすいので、そちら見てもらうのが確実ですが、一応。

導入

ダウンロードとかnpmとかCDNとかあるんですが、今回はyarnで

yarn add @splidejs/splide

ダウンロードしたらcss,jsを読み込んでおきます。

import '@splidejs/splide/css/core';

cssが複数あり、テーマなども用意されています。
自分でデザインをカスタマイズする場合はcssはcoreだけでOK。

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>
  • ラベルが必要
  • 要素はsectionやul使わなくてもOKです。クラス名合わせてね
  • ページネーションやナビゲーションを別で設定することも可能ですが、指定しないとtrackの前後に生まれます
<section class="splide" aria-label="Splideの基本的なHTML">
	<div class="splide__arrow"></div>
	<div class="splide__track"> ... </div>
	<div class="splide__pagination"></div>
</section>

jsは

import Splide from '@splidejs/splide';
new Splide('.splide').mount();

オプション

今回指定してみたオプション

new Splide( '.splide', {
  mediaQuery: 'min',
  perPage: 1,
  perMove: 1,
  arrows: false,
  breakpoints: {
    768: {
      perPage: 3,
      focus  : 0,
      omitEnd: true,
      arrows: true,
    },
    1025: {
      destroy: true
    }
  }
} ).mount();

breakpoints

breakpointsで画面幅ごとの設定を追加できます。
デフォルトだと、breakpointsで指定するのは「●px以下のとき」を追加で設定します。
(PC基準でタブレットやSPの設定を追加するイメージ)

mediaQueryを設定することで、PC/SPどちらの画面を基準にするか変更できます。
@media screen and (max-width: ●px)の max/min ですね。

perPage

1ページに何枚のスライドを表示するかを指定

perMove

1度の移動で、何枚のスライドを移動するかを指定

focus

複数スライドがある場合、どのスライドをアクティブにするかを指定

omitEnd

スライダーが最後のページに到達した際矢印を無効化し、ページネーションのボタンを最低限にするかどうかを決定（^4.1.0）

🟩公式のリンクおいときます。間違いないのはこちらです。イベントハンドラも色々あります。
https://ja.splidejs.com/guides/getting-started/

メモ

他のプラグインと少し違うとことか、指定が必要なもののメモ。

mount

ちゃんとドキュメントを読まずに、「new Splide(element, option) で動くだろ〜😇」ってしたら何も起きませんでした。
すごい初歩で。。。

.mount()することで実行されるのでお気をつけください。

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

もしくは

const sliderMain = new Splide('.splide', option)
sliderMain.mount()

してください。

focusとomitEnd

さきほどオプションで記述したfocusとomitEndを指定せずに、perPageを設定すると、ナビゲーションの数が合わなくなりました。
perPageを設定するときは、focusとomitEndを指定しましょう。

スクロールバー

Swiperでいうところのscrollbarのような挙動ができない。
https://swiperjs.com/demos#scrollbar

イベントハンドラの登録でこねこねしたら作れるとは思います。
ただ、そこまでなら、もうSwiperにしちゃえばいいかという気持ちにもなりました。笑

感想

オプションやイベントが最低限備わっているし、痒いところには手が届いてる。
ので、ミニマムで使うのにはかなりいいんじゃないかな〜と思いました。
(そもそもSwiper色々できすぎてややこしい！って人は、むしろSplideオススメです)

デザインやアニメーションにこだわりがあるときは、大体オプションでなんでもできちゃうので、Swiperの方が楽チンかもですね。

Discussion