質問: こんにちは。 こちらで一度質問し、一度は解決したのですが、追加要件の為問題が置きました。 ・前回の質問。・前回の回答。・今回の追加の問題。・解決したいこと。・試したこと。・コード。 の順番で記述したいと思います。 ーー前回の質問ーー スマホ対応のフルスクリーンでのスライド(横)をすることになり、javascriptのスライダー Swiperを入れてみました(フルスクリーン対応でしたので)。 無事にフルスクリーンでのスライドはできたのですが、画面をドラッグしたり、スマホでフリック、スワイプしたりするとスライドしてしまいます。 要件として前後にスライドさせるボタンでのみスライドさせなければならず、 とりあえずPC側は、SwiperのオプションのsimulateTouch: falseで対処できましたが、スマホ画面がうまくいきません。 フリック、スワイプを無効にする、もしくは前後にスライドさせるボタン以外ではスライドを無効にする等はできるでしょうか? ーー前回の回答ーー スライダー画像の上にposition: absolute;などでdivをスライダーの上に重ね、 スライドボタンには、position: relative;を付与しz-indexでdivよりも上に重ねる。これでスライドボタン機能は正常に動き、スライダーの上にはdivがあるのでタッチでスライドができなくなる。 ーー今回の追加の問題ーー フルスクリーンでスライドする中に更にスマホでフリック操作できる箇所や、GoogleMap、クリックで開くモーダル等のユーザーが動かすところがある。 前回の回答のやり方ですと前後にスライドさせるボタン以外スライダー画像の上のdivがあるので操作できなくなってしまっているという問題。 ーー解決したいことーー スライダー画像の上にdivをおいてもフルスクリーンでスライドする部分以外は操作できるようにするやり方はあるでしょうか? もしくは、フリック、スワイプを無効にする、前後にスライドさせるボタン以外ではスライドを無効にする等はできるでしょうか? ーー試したことーー GoogleMapの等,イベントが発生するものにz-indexでスライダー画像の上にdivより大きい数字をつけてみましたが、うまく行きませんでした。 ーーコードーー ``` Document //前回回答をもらったやり方 ////前回回答の場合前後ボタンをコチラに移動 ////前回回答の場合前後ボタンをコチラに移動 ////スライダー画像の上のdiv //前回回答をもらったやり方 //GoogleMap以外にもありますが(長いので省略致します) モーダルの処理(長いので省略致します)//クリックしたらモーダルが出る //この前後ボタンでのみスライドさせたい //この前後ボタンでのみスライドさせたい ``` よろしくお願いいたします。
回答: $('.swiper-slide').on('touchmove', function(){ return false; }) Jsにこちらの記述で解決いたしました。 touchmove(フリックした時)return false;で止まりますね。 お騒がせいたしました。