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,
},
})