jQueryでスライダーを実装するためのプラグインといえば、「slick」をはじめ多くのプラグインがありますが、ひと昔前はスライダーといえば「bx-slider」だったと言っても過言ではないと思います。もちろん2018年現在でも十分現役の「bx-slider」ですが、たまに融通がきかない事態に陥ることがあります。
スマホで画面スクロールが出来ない
スライダーを実装しているのでスライダー自体は横にスクロール出来るのですが、そのスライダーの上で上下に画面スクロールさせようとしても動いてくれない、という事態に陥ったのです。「preventDefaultSwipeX」と「preventDefaultSwipeY」で制御できるものかと思いきや、スワイプは出来てもスクロールが出来ないなど、思ったような挙動にならず。
とはいえどこかで制御していることは確かなので、オプションでダメならライブラリ自体をイジってしまおう、という事でいろいろ試してみたところ、一ヶ所コメントアウトするだけでOKでした。
※bxSlider v4.2.1dの例
【該当箇所】
～中略～
Z=function(b){if("touchstart"===b.type||0===b.button)if(b.preventDefault(),
～中略～
【コメントアウト後】
～中略～
Z=function(b){if("touchstart"===b.type||0===b.button)if(/*b.preventDefault(),*/
～中略～
以上、bx-sliderをスマホで実装したらスライダーの上で上下にスワイプ出来なくて、画面をスクロール出来ない問題の解決法でした。
