Swiper内のinputにフォーカスを当てるとスライダーが移動してしまう

Swiper.jsでスライダー内のinputやボタンにフォーカスを当てた際、スライダーが意図しない移動するようだったので、調べた対応方法をメモ。
Swiper.jsの8.3.2を使用しています。

サンプルコード

まずは意図しない動作になった例です。
各スライド内にinputやbuttonを配置します。

  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <p>スライド1</p>
      <input type="text">
      <hr>
      <input type="radio">
      <input type="checkbox">
      <select>
        <option>-----</option>
      </select>
      <hr>
      <button>button</button>
    </div>
    〜 略 〜
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Swiperの設定を行います。

const swiper = new Swiper('.swiper', {
  slidesPerView: 'auto',
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

2枚目や3枚目のスライド内のinputにフォーカスしたりボタンをクリックしたりすると、スライドが左端に移動します。
意図しない動作になるデモページ

フォーカスの当たったスライドがcurrentになるような仕様なのかと思い調べてみましたが、Issuesなどをみる限りバグのようでした。

このバグの対応方法は3つあります。
1つ目はオプションにwatchSlidesProgress: trueを追加する方法で、trueにすると各スライドが表示されているかなどを監視するようです。

const swiper = new Swiper('.swiper', {
  slidesPerView: 'auto',
  watchSlidesProgress: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

watchSlidesProgress: trueのデモページ

2つ目はa11yの項目でenabled: falseを追加する方法です。

const swiper = new Swiper('.swiper', {
  slidesPerView: 'auto',
  a11y: {
    enabled: false,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

ただしこの設定はアクセシビリティを無効にするという設定になるので、無効でも問題ないという場合しか使えません。
a11yのenabled: falseのデモページ

3つ目がSwiper.jsのバージョンを下げる方法で、7系まで下げると回避できるようでした。
Swiper.js 7.4.1のデモページ

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2023年2月
 1234
567891011
12131415161718
19202122232425
262728