Overflow

オーバーフロー

スライドの過不足の制御

スライダーの幅に対してスライドの数が不足しているとき、矢印やページネーションを非表示にしたり、あるいはドラッグを無効化したりしたい場合があります。バージョン4.1.0から実装されたis-overflowクラス、またはoverflowイベントを用いると、スライドの過不足に応じ、どのようにスライダーがふるまうべきかを柔軟にカスタマイズできるようになりました。

たとえば、fixedWidth（またはautoWidth）をによってスライドの幅が固定されている場合、コンテンツの幅がスライダー本体よりも小さくなる可能性があります。このような場合にはナビゲーションなどの機能を無効化し、ブラウザのリサイズによって幅が狭くなった場合に再度有効化するようにしたものが以下の例です。右端をドラッグし、動作を確認してみてください。

この機能は、スライド自体が動的に追加・削除される場合にも効力を発揮します。下の例では、スライドの枚数が十分な場合にのみナビゲーションとドラッグが有効になります。

is-overflowクラス

スライド全体の幅が、親要素であるリスト要素を超えている場合、Splideはルート要素に対してis-overflowクラスを付与します。このクラスを:not()疑似クラスと併用することで、例えば、コンテンツが不足している際に矢印を非表示にするといったことが実現できるようになります。

.splide:not(.is-overflow) .splide__arrows {
  display: none;
}
CSS

.splide:not(.is-overflow) .splide__arrows {
  display: none;
}

オーバーフローの監視

Splideは、コンテンツの幅が親であるリスト要素の幅を超えたとき、あるいは下回ったとき、overflowイベントを発生させます。on()メソッドと、コールバック関数が受け取る引数を利用すれば、このタイミングで任意の処理を実行できます。ただし、リスナの登録は必ず**mount()よりも前**に行ってください。

var splide = new Splide();

splide.on( 'overflow', function ( isOverflow ) {
  if ( isOverflow ) {
    // 十分なスライドがあるときの処理
  } else {
    // スライドが不足しているときの処理
  }
} );

splide.mount();
JavaScript

var splide = new Splide();


splide.on( 'overflow', function ( isOverflow ) {
  if ( isOverflow ) {
    // 十分なスライドがあるときの処理
  } else {
    // スライドが不足しているときの処理
  }
} );


splide.mount();

isOverflowはコンテンツの幅が十分である際にtrue、そうでない場合にfalseになります。optionsと併用することで、矢印やページネーションを非表示にしたり、あるいはドラッグを無効化したりできます。

var splide = new Splide();

splide.on( 'overflow', function ( isOverflow ) {
  splide.options = {
    arrows    : isOverflow,
    pagination: isOverflow,
    drag      : isOverflow,
  };
} );

splide.mount();
JavaScript

var splide = new Splide();


splide.on( 'overflow', function ( isOverflow ) {
  splide.options = {
    arrows    : isOverflow,
    pagination: isOverflow,
    drag      : isOverflow,
  };
} );


splide.mount();

ループスライダー

ループスライダーの場合は複製されたスライドが存在するため、以下のような追加処理が必要です。

clonesオプションを変更し、複製されたスライドの破棄・再生成をする
スライダーの位置をgo()メソッドを用いてリセットする

var splide = new 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();
JavaScript

var splide = new 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();

結果は、例えば以下のようになります。

なおclones: undefinedは、Splideが自動的にクローンの数を算出し、生成することを意味します。

スライドの中央揃え

次の例のように、スライダーに対してスライドの数が不足している際、コンテンツをセンタリングしたい場合があるかもしれません。

このようなスライダーを作成するには、以下のような2つの方法があります。

CSSによる中央揃え

is-overflowクラスを利用すると、CSSで簡単に中央揃えを実現できます。

ルート要素にis-overflowがない場合に、リスト要素にjustify-content: centerを適用します。

.splide:not( .is-overflow ) .splide__list {
  justify-content: center;
}
CSS

.splide:not( .is-overflow ) .splide__list {
  justify-content: center;
}

gapオプションを有効にしている場合は、最後のスライドのmarginを取り除き、中央からのずれを解消します。

.splide:not( .is-overflow ) .splide__slide:last-child {
  margin: 0 !important;
}
CSS

.splide:not( .is-overflow ) .splide__slide:last-child {
  margin: 0 !important;
}

スクリプトによる中央揃え

CSSを用いる代わりに、スクリプトを用いても同じ結果を得ることができます。

Layout#isOverflow()をresizedイベントで確認し、結果に応じてリスト要素のjustifyContent = 'center'を切り替える
gapオプションを有効にしている場合には、isOverflow()がfalseを返す際に最後のスライドのmarginを取り除く

サンプルコードは次の通りです。

var splide     = new Splide();
var Components = splide.Components;

splide.on( 'resized', function() {
  var isOverflow = Components.Layout.isOverflow();
  var list       = Components.Elements.list;
  var lastSlide  = Components.Slides.getAt( splide.length - 1 );

  if ( lastSlide ) {
    // `justify-content: center`を適用・除去する
    list.style.justifyContent = isOverflow ? '' : 'center';

    // 最後のmarginを取り除く
    if ( ! isOverflow ) {
      lastSlide.slide.style.marginRight = '';
    }
  }
} );

splide.mount();
JavaScript

var splide     = new Splide();
var Components = splide.Components;


splide.on( 'resized', function() {
  var isOverflow = Components.Layout.isOverflow();
  var list       = Components.Elements.list;
  var lastSlide  = Components.Slides.getAt( splide.length - 1 );


  if ( lastSlide ) {
    // `justify-content: center`を適用・除去する
    list.style.justifyContent = isOverflow ? '' : 'center';


    // 最後のmarginを取り除く
    if ( ! isOverflow ) {
      lastSlide.slide.style.marginRight = '';
    }
  }
} );


splide.mount();