【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-containeroverflowが設定されていないため、スクロールバーが表示されるようであれば追加してください。

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でマウスホイールでスクロールする方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍