Splideでスライドが1枚だけのときはarrowsをfalseにしてスライドできなくする方法（ブレイクポイント非考慮の場合）

スライドが1枚のときにarrowsがあるのはややこしいしスライドさせたくない

WordPressが入った動的サイトでsplideを使ったカスタムフィールドを作成したのですが、splide側で1枚のときだけarrowsをfalseにしてスライドできなくするようなオプションが用意されていなかったので、JSでゴニョゴニョして実現してみました。

デモ

splideのオプションの注意点

// CodePenより一部抜粋
isDestroy = slideLength === 1 ? "completely" : false; //destroy:trueはブレイクポイントを監視する場合。completelyは完全に削除する。

/// 中略

addOptions = {
  destroy: isDestroy //arrowsをfalseにしただけだと微妙に動いてしまうのでdestroyする
};

コメントアウトで書いている通りdestroyの有効オプションは'completely'とtrueが存在しており、trueの場合は破棄されるけどブレイクポイントの監視は続くという仕様になっているそうです。
https://ja.splidejs.com/guides/options/#destroy

ブレイクポイントによってスライド数が変化する場合

ブレイクポイントを考慮する場合は下記記事がとても分かりやすいのでこちらを参考にしてください。
https://b-risk.jp/blog/2022/07/splide/#05__perPage

CSSでも多分できる

splideではスライドが1枚だけのときとそうでないときで、大枠の要素<section class="splide">のクラス名が変化します。

これを利用すれば恐らくCSSだけでもできるかと思います。

スライドが2枚以上あるときはis-overflowが付与されていますので、このセレクターでarrowボタンをdisplay:noneしてpointer-events:noneなどすればできるかなと思います。（試してはいないので実装する場合は自己責任でお願いします。）

<!-- スライドが2枚以上のとき -->
<section class="splide splide--loop splide--ltr splide--draggable is-active is-overflow is-initialized" aria-label="cat slide" id="splide01" aria-roledescription="carousel">
...
</section>

<!-- スライドが1枚だけのとき -->
<section class="splide splide--loop splide--ltr splide--draggable is-active is-initialized" aria-label="cat slide" id="splide02" aria-roledescription="carousel">
...
</section>

他に何か良い方法などありましたらコメントまたはTwitterなどで教えていただければ幸いです！