swiperでドラッグ(スワイプ)での切り替えを無効にする2つの方法

Swiperでドラッグ(スワイプ)を無効にする allowTouchMove:false
SwiperをPCでのみ無効にする enabled:false
Swiperをhover時に停止させる pauseOnMouseEnter:true
を紹介します

スワイプを無効にする方法

オプションを使用する方法

swiper標準のオプションを使用する方法です

const swiper = new Swiper(".swiper", {
  allowTouchMove: false
});

必要なドラッグの距離を増やす方法

thresholdはswiperをドラッグで動かす際のpx数の下限を設定できます。

const swiper = new Swiper(".swiper", {
  threshold:999999,
});

この値を大きくしておくことで擬似的にドラッグでの切り替えを無効にすることができます。

この方法は特別な場合以外は使う必要はありません。

上杉

allowTouchMoveでドラッグを無効にした場合に、swiper-slideの中のクリックイベントやホバーイベントが発生しないというバグがありましたのでその際に使用しました

SwiperをPCでのみ無効にする場合

const swiper = new Swiper('.swiper', {
  enabled:false,
})

enabledを使用してページ読み込み時にブラウザ幅によってtrue/falseを切り替えることでPCのみSwiperを無効にすることが可能です。

breakpointsのオプションを使用する方法もありますが

  • slidesPerView
  • slidesPerGroup
  • spaceBetween
  • grid.rows

など一部のオプションのみで使用可能です。

Swiperをhover時に停止させるオプション

const swiper = new Swiper('.swiper', {
 autoplay: {
  pauseOnMouseEnter:true,
 },
})
ブログ一覧へ