Swiper.jsでスライダー内のinputやボタンにフォーカスを当てた際、スライダーが意図しない移動するようだったので、調べた対応方法をメモ。
Swiper.jsの8.3.2を使用しています。
サンプルコード
まずは意図しない動作になった例です。
各スライド内にinputやbuttonを配置します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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の設定を行います。
1 2 3 4 5 6 7 | 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にすると各スライドが表示されているかなどを監視するようです。
1 2 3 4 5 6 7 8 | const swiper = new Swiper('.swiper', { slidesPerView: 'auto', watchSlidesProgress: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },}); |
watchSlidesProgress: trueのデモページ
2つ目はa11yの項目でenabled: falseを追加する方法です。
1 2 3 4 5 6 7 8 9 10 | 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のデモページ
コメントが承認されるまで時間がかかります。