こんにちは。櫻井です。 最近、スライダーを見ると一々ボタンを押さないと次のスライド見れないのって、億劫だよなーそのまま横スクロール(shift+マウスホイール)でスライド動いてくれないかな？って思うことが多いのでSwipperでできないか調べてみました。
今回はその備忘録です。
Swiperで横にスクロールした時だけスライドするやり方
See the Pen Swiper scroll slide by knap_develp (@knap_develp) on CodePen.
やり方はすごいシンプルでmousewheelのforceToAxisをtrueにするだけでした。
こんな簡単だったの！？
forceToAxisはtrueにするとスクロールする方向とスライドする方向があっていた時にスライド動くようになるので例えば、
Swiperが縦にスライドするようにできているときは縦方向にスクロールするとスライドが動く形になります。
ちなみにmousewheelをtrueにしてしまうとSwiperのスライドする向きに関わらず縦方向のスクロールに対してもスライドが動いてしまいスライド終わるまで下のコンテンツに進まないので鬱陶しいです。
forceToAxisをtrueにしただけだとマウスパットで横にスクロールした時2個3個一気にスライドされてしまうのでsensitivityの値をデフォルトの値から少し上げてあげるとよさそうです。
デモではsensitivityを1から3に上げています。
これからはSwiper使うときはforceToAxisをtrueにしようと思います。
他のMousewheel Controlのプロパティが知りたい方はdocument是非一度読んでみて下さい。