【Splide】スライダーの枚数でオプションを変更する

Splideとは

アクセシビリティに配慮した軽量・高機能スライダー
https://ja.splidejs.com/
他のライブラリ（jQuery等）に依存せず、他のスライダーのライブラリと比べてもファイルサイズが軽いのが特徴です。

また、アクセシビリティへの配慮に強いこだわりがあります。
https://ja.splidejs.com/guides/accessibility/

完成版

実装に至った経緯

特にWordPress等のCMSでスライダーを実装する場合、スライダーの枚数が可変になる場合があります。
あらかじめ条件分岐を追加しておくことで運用しやすいサイトにする目的で作成しました。

コードの解説

Splideの基本構文については省略し、スライドの枚数による条件分岐にフォーカスして解説します。

スライダーの枚数を取得

const slideContents = element.querySelectorAll('.splide__slide');
const slideLength = slideContents.length;

.splide__slideのコンテンツを全て取得しその総数をslideLengthに代入することでスライドの枚数が取得されます。

条件分岐を追加する

今回はスライドが2枚以上の場合とそれ以外で条件分岐します。

const splide = new Splide( element , {
    type: slideLength >= 2 ? 'loop' : '',
    ~~~省略
    arrows: slideLength >= 2 ? true : false,
    drag: slideLength >= 2 ? true : false,
    snap: slideLength >= 2 ? true : false,
  } );

slideLengthの数による条件分岐を追加します。
（三項演算子を使用することでコードを綺麗に保つことができると思います。）

スライドの枚数が2枚以上の時、
スライダーをループする・矢印を表示する・ドラッグを有効化しています。

これを反映した結果が完成版になります。