Step By Work

swiperでドラッグでの切り替えを無効にする2つの方法

上杉 洋 Hiroshi Uesugi

Date: 2023.01.20
Update: 2023.01.20

swiperでドラッグを無効にするのは実は2つの方法があります。
王道な方法と小手先のテクを使った方法を紹介します

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

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

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

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

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

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

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

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

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