Zenn
🐅

【Splide】スライド数が足りないときループスライダーを無効にする

に公開
JavaScript
slide
splide
tech

Web制作において、SplideはJavaScriptのスライダーライブラリの一つとして広く使われており、特にループ処理と組み合わせて使用する方も多いと思います。

しかし、ループ処理を用いる際に注意が必要なのが、スライダーの幅に対してスライドの数が不足している場合です。このような状況では、意図しない挙動を防ぐために、スライダー自体を無効にするのが適切です。

たとえば、コーポレートサイトの新着記事をカード形式でスライド表示させる場合、投稿件数が少ないとスライダーとして機能させる必要がないことがあります。
それどころか、以下のように1件の記事が複数回表示されてしまい、意図しないループが発生するケースもあります。

本記事では、スライダーの幅に対してスライドの数が不足しているときにSplideを無効化する方法を紹介します。

スライダーの過不足を制御する

overflowによる監視

Splideにはoverflowというオプションがあり、コンテンツの幅に対してスライドさせる要素が足りている場合はtrue、不足している場合はfalseになります。
こちらを利用して、isOverflowがtrueのときとfalseのときでスライダーの有効・無効を切り替えます。

まずは枠から。

script.js
var splide = new Splide();
splide.on( 'overflow', function ( isOverflow ) {
  if ( isOverflow ) {
    // 十分なスライドがあるときの処理（ループスライダー有効）
  } else {
    // スライドが不足しているときの処理（ループスライダー無効）
  };
});
splide.mount();

これはsplideのoptionsを用いて、以下のように書き換えられます。
isOverflowはスライド不足のときfalseです。以下のようにすることで、矢印やページネーションを無効にできます。

script.js
var splide = new Splide();
splide.on( 'overflow', function ( isOverflow ) {
  splide.options = {
    arrows: isOverflow,
    pagination: isOverflow,
    drag: isOverflow,
  };
});
splide.mount();

さらにループスライダーでは、スライダーの位置をgo()メソッドを用いてリセットする処理、clonesオプションを変更し、ダミーのスライドが作られないようにする処理を記述します。

script.js
var splide = new Splide( '.splide', {
  type: 'loop'
});
splide.on( 'overflow', function ( isOverflow ) {
  // スライダーの位置をリセット
  splide.go( 0 );

  splide.options = {
    arrows: isOverflow,
    pagination: isOverflow,
    drag: isOverflow,
    // クローンの破棄・再生成
    clones: isOverflow ? undefined : 0
  };
});
splide.mount();

スライド中央揃え

スライドの数が不足しているとき、コンテンツを中央揃えにする場合はCSSで調整します。
is-overflowクラスを利用します。

style.css
/* 中央揃え */
.splide:not( .is-overflow ) .splide__list {
  justify-content: center;
}
/* gapオプション有効のときに最後のコンテンツのmarginを取り除く */
.splide:not( .is-overflow ) .splide__slide:last-child {
  margin: 0 !important;
}

※JavaScriptでも中央揃えにすることはできます。

実際のコード

script.js
var splide = new Splide( '.splide', {
  type: 'loop'
});
splide.on( 'overflow', function ( isOverflow ) {
  splide.go( 0 );
  splide.options = {
    arrows: isOverflow,
    pagination: isOverflow,
    drag: isOverflow,
    clones: isOverflow ? undefined : 0
  };
});
splide.mount();
style.css
.splide:not( .is-overflow ) .splide__list {
  justify-content: center;
}
.splide:not( .is-overflow ) .splide__slide:last-child {
  margin: 0 !important;
}

最後まで読んでいただきありがとうございました。

参考

https://ja.splidejs.com/guides/overflow/

Splideは、本記事執筆時点の2025年5月23日時点で、バージョン4.1.3です。
https://ja.splidejs.com/
https://github.com/Splidejs/splide

Discussion