Splideで同じスライダーを複数設置する方法

jQueryが不要で高機能ということで最近人気のスライダーライブラリ「Splide」。
便利ではあるものの、同じスライダーを複数設置するのに弱いというデメリットも存在しています。
ただ、スライダーは何かと複数設置をしたい場面が多いのではないでしょうか。

今回はそんなSplideで同じスライダーを複数設置する方法を紹介いたします！

実はコードのちょっとした工夫だけ

紹介します！と大口を叩いたものの…やることはほんのちょっとの工夫だけです。
スライダーに特定のclassを付与し、getElementsByClassNameで取得します。 それを配列にするだけ。

ー 完 ー

…実は解説という解説が必要なほど難しいことがないんですよね。
2025年1月段階の公式サイトには記載がないのですが、それだけで複数設置ができるようになります。

const splideModalElements = document.getElementsByClassName('js_Slider');
Array.from(splideModalElements).forEach(function(element) {
  new Splide(element, {
    type: 'loop',
    perPage: 1,
    autoplay: false,
    arrows: false,
    focus: 'center',
  }).mount();
});

まとめ

スライダーを作るたびに詰まって詰まって諦めて使い慣れたSwiperに逃げていたのですが、工夫すればどんなことでもできるもんですね！

Splideはアニメーション関係のオプションが整っていて使い勝手も良いので、今後はこちらを活用しようかなと思っている今日この頃です。