【Swiper】ループ時にスライダーがうまく動かないときの設定項目

スライダーライブラリの「Swiper」についてのオプション解説です。

指定したスライダー数が画面上に表示するスライダー数より少ない場合などに、うまくループ機能が動作しないときがあります。

その際はloopAdditionalSlidesオプションを使用してみる。

const slider = new Swiper('.slider', {
  loop: true,
  loopAdditionalSlides  : 1, // 1以上を指定
})

 

また、windowサイズをリサイズした際に、autoplayが停止してしまうことがあるため、その際はwindowのresizeイベント時にautoplayを有効にする。

window.addEventListener('resize', ()=>{
  slider.autoplay.paused = false;
  slider.autoplay.start();
})