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

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

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

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

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

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

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

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

目次

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

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

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

デフォルトの設定で使う場合は、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を用意しました。

  1. mousewheel無効のスライダー
  2. mousewheel有効のスライダー

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

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

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

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

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

mousewheel: false
Slide 1
mousewheel: false
Slide 2
mousewheel: false
Slide 3
const swiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
  },
});

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

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

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

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

続いてmousewheeltrueの場合です。

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

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

mousewheel: true
Slide 1
mousewheel: true
Slide 2
mousewheel: true
Slide 3
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で閲覧しているユーザーにとっては意外と嬉しい機能です。

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

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる