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

2023年12月1日

記事内に広告を含みます

パソ君

・マウスホイールでスライドさせることできる？

こんな疑問にお答えします。

たまにスライダーの実装で「マウスホイールやタッチパッドでもスライド操作できるようにしたい」という要望があります。

実はSwiperでは簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「マウスホイール／タッチパッドでスライドさせる方法」について解説していきます！

swiper自体の作り方については下記記事を参考に↓

2023年2月20日【簡単】Swiperの使い方｜初心者向けに解説【オプション】

この記事でわかること

マウスホイール／タッチパッドでスライドさせる方法

【Swiper】マウスホイール／タッチパッドでスライドさせる方法
- ➀：通常通りのスライダーを実装
- ➁：オプションにてmousewheelをtrueにする
【Swiper】マウスホイール／タッチパッドでスライドさせる方法：まとめ

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

そんなマウスホイールやタッチパッドでスライドさせるサンプルがこちら↓

See the Pen swiper　マウスホイールでスライドさせる by jito-coder (@jito-coder) on CodePen.

スライダー部分でマウスホイールを触ると、スライド要素が動きますよね。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        mousewheel: true,
        spaceBetween: 10, 
        slidesPerView: 3,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

コードの中で重要な点がこちら↓

通常通りのスライダーを実装
オプションにてmousewheelをtrueにする

順に解説してきます。

➀：通常通りのスライダーを実装

まず通常通りのスライダーを実装するHTMLを組み立てます。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

ここに関してはいつも通りでOKです。

➁：オプションにてmousewheelをtrueにする

JavaScriptにて「mousewheel」オプションを「true」にしましょう。

これだけでマウスホイールやタッチパッドで、スライド操作することができます。

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        mousewheel: true,
        spaceBetween: 10, 
        slidesPerView: 3,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

下記を設定するだけで、実装可能なので便利ですよね！