【Swiper】タッチパッドやマウスホイールでスライドを移動させる方法

Swiperでスライダーを作成していると、以下のような悩みに直面した方もいるかと思います。

マウスホイールや、タッチパッドのスワイプでもスライド移動させたい…

Swiperで作成したスライダーは、デフォルトではマウスホイールやタッチパッド、トラックパッドのスワイプに対応していません。

ドラッグ（マウス左ボタンを押したまま動かすこと）することでスライド移動させることは可能ですが、もっと簡単に移動させたいですよね。

そこで今回の記事では、Swiperでマウスホイールやタッチパッドのスワイプに対応したスライダーの作成方法を紹介します！

DEMOスライダーでの動作確認や、実装コードの解説もしていきますので、ぜひ参考にしてみてください。

すでにSwiperを使ったことがある・基本的な使い方を知っている方に向けて書いたので、最低限必要なコード以外は省略しています。

マウスホイールやタッチパッドに対応させるには”mousewheel”オプションを設定

マウスホイールやタッチパッドに対応させるには、mousewheelオプションを設定しましょう。

mousewheelオプションには、booleanかMousewheelOptions(オブジェクト)を指定できます。

デフォルトの設定で使う場合は、trueを指定します。

const swiper = new Swiper(".swiper-container", {
  mousewheel: true,
});

オプションを指定する場合は、以下のようにしてMousewheelOptions(オブジェクト)を渡します。

const swiper = new Swiper(".swiper-container", {
  mousewheel: {
    forceToAxis: true,
  }
});

これでマウスホイールやタッチパッドの操作でスライド移動が可能になりました。

マウスホイールに関するさまざまなオプションが用意されているので、詳しくはSwiper APIのMousewheel Controlをご確認ください。

mousewheelオプションの詳しい使い方は、後日別の記事で紹介しようと思います。

次で紹介するDEMOスライダーで、実際の挙動を確認していきましょう。

“mousewheel”オプションを設定したDEMO

ここでは、以下の2つのDEMOを用意しました。

それぞれのスライダーの挙動を比較してみてください。

※ここではmousewheelのみに焦点を当てるために、ページネーションや矢印ボタンクリックでのスライド移動はできないようにしています。

DEMO1. mousewheelオプションが無効の場合

まずはmousewheelオプションがfalseの場合をみてみましょう。

mousewheelはデフォルトでfalseなので、trueにしない限りは無効のままです。

const swiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
  },
});

mousewheelが無効の場合、スライド移動の方法はドラッグのみになります。

マウスなら簡単にドラッグできますが、ノートPCのタッチパッドでは少し操作しにくいですよね…。

次はmousewheelが有効の場合のDEMOを確認してみましょう。

DEMO2. mousewheelオプションが有効の場合

続いてmousewheelがtrueの場合です。

この場合ドラッグのほかに、マウスホイールを前後に回したり、タッチパッドをスワイプすることでもスライド移動が可能です。

スライダーの上にカーソルを当てて、マウスホイールかタッチパッドで上記の操作をしてみてください。

const swiper = new Swiper(".swiper-container", {
  mousewheel: true,
  pagination: {
    el: ".swiper-pagination",
  },
});

まとめると、上記の操作でスライドを移動することができます！

わざわざクリックしなくてもスライドを操作することができるので、便利ですね。

【まとめ】Swiperをマウスホイールやタッチパッドで操作するには”mousewheel”オプションを有効にする

Swiperで作成したスライダーをマウスホイールやタッチパッドで操作する方法を紹介しました。

既に説明した通り、mousewheelオプションをtrueにするだけで実装可能ですね。

const swiper = new Swiper(".swiper-container", {
  mousewheel: true,
});

クリックの動作なしでスライドを移動することができるので、PCで閲覧しているユーザーにとっては意外と嬉しい機能です。

矢印ボタンやページネーションでのスライド移動を設定しない場合や、全画面表示のスライダーを作成する場合は特に役立ちますので、ぜひ参考にしてみてください。

あわせて読みたい

【Swiper】縦スライド可能な全画面ページを実装する方法 縦スクロールで画面いっぱいのスライドを切り替える縦長ページを作成する機会があったので、実装方法を紹介しようと思います。 有名なプラグインだとfullPage.jsがあり…