Step By Work

大阪のホームページ制作会社

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

Date: 2023.01.20
Update: 2023.12.02

執筆・監修

上杉 洋 Hiroshi Uesugi

1991年生まれ。 株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

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

この記事へのコメント 0件