【Swiper】マウスホイールでスクロールする方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperをマウスホイールでスクロールする方法をご紹介しています。

Swiperをマウスホイールでスクロールするようにしたいんだけど、どうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

本記事では、下記デモの内容を作成方法を解説しています。デモ内にマウスカーソルを乗せてマウスホイールを上下に動かすと、スライドが切り替わるようになっています。

See the Pen 4178 by ryohei (@intotheprogram) on CodePen.

単体のスライダーとしてはもちろん、セクションをページに見立ててマウスホイールでスライドするようなWebページにも有効です。

Swiperを読み込む

まずは「Swiper」本体をダウンロードします。公式サイトから本体をダウンロードするか、CDNで読み込みます。検証段階ではCDNで問題ないのですが、CDNはいつリンク切れになるかわかりません。そのためサイトに組み込む場合はダウンロードしたファイルを読み込むようにしましょう。

CDNで本体ファイルを読み込み場合は、下記のタグを使用してください。2021年10月現在最新のファイルです。CSSファイルはheadに、JSファイルはSwiperの初期化より上の行で読み込みます。

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.css">
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.js"></script>

以上でSwiper本体の読み込みは完了です。

Swiperをマウスホイールのスクロールする

Swiperの本体ファイルが読み込めましたら、HTMLでレイアウトを作成します。

下記はデモで使用しているサンプルになります。実装される内容とは異なるかと思いますので、スライド内のコンテンツに関しましては適宜変更してご利用ください。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><h1>1</h1></div>
        <div class="swiper-slide"><h1>2</h1></div>
        <div class="swiper-slide"><h1>3</h1></div>
    </div>
</div>

続いてSwiperのスタイルを上書きします。デモではスライドを高さをビューポートいっぱいに表示するようにしていたため、heightの値を自前のCSSで上書きします。Swiperのバージョンによっては、swiper-containerにoverflowが設定されていないため、スクロールバーが表示されるようであれば追加してください。

CSS

.swiper-container {
  height: 100vh;
  overflow: hidden;
}

最後にスクリプトです。下記の初期化をすることでSwiperが動作します。外部ファイルを使用しない場合は<script>で囲ってご利用ください。

JavaScript

const mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    effect: 'slide',
    slidesPerView: 1,
    mousewheel: {
        invert: false,
    },
})

マウスカーソルによるスライド移動の制御は「mousewheel」を使用することで実装することができます。他にもいくつかオプションがありますので、詳しくはSwiper APIをご参照ください。

最後に

Swiperであればマウスホイールのスクロールに対応したスライダーをオプションを追加するだけで簡単に作成することができます。SwiperであればWebサイトで使用するほとんどのスライダーを実現することができるため、スライダープラグインを「Swiper」に統一しておくことで、保守フェーズ移行後もクライアントの要望にも応えやすくなるかもしれないですね。

以上、Swiperでマウスホイールでスクロールする方法のご紹介でした！