こんにちは、ryohei(@ityryohei)です!

本記事では、Swiperを使用してマウスホイールでスクロールするスライダーの作り方をご紹介しています。

完成は下記の通りです。

上記デモにマウスカーソルを載せてマウスホイールでスクロールすると、スライドの表示が切り替わるかと思います。

セクションごとに分けたページをスライドして動かすプラグインは他にもありますが、「Swiper」であればコンテンツ内はもちろんセクションごとのスクロールする1ページスクロールのサイトに対応することができるため、おすすめです!

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

Swiperを読み込む

まずは「Swiper」本体をダウンロードします。公式サイトからダウンロードもできますが、開発者の方からCDNが提供されていますので、使いやすい方で読み込んでいただければと思います。

ちなみにCDNであれば下記に記載しておりますので、読み込んでご使用いただければと思います。

<!-- Swiper CSS -->
<link rel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css">
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

マウスホイールのスクロールで動くスライダーを作成する

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>

続いてスライダーのスタイルを上書きします。今回はデモの内容のご紹介となるため、高さをビューポートいっぱいに表示するために高さを上書きします。

CSS

.swiper-container {
  height: 100vh;
}

最後にスクリプトを。

下記を記述することでスライダーが動きます。外部ファイルを使用しない場合は「<script>」で囲ってお使いください。

JS

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

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

最後に

いかがでしたでしょうか。

Swiper」であればマウスホイールのスクロールに対応したスライダーをオプションを追加するだけで簡単に作成することができます。サイト内で使用するスライダーを「Swiper」にしておけばクライアントの要望にも応えやすくなるので、おすすめです!

以上、Swiperでマウスホイールでスクロールするスライダーの作り方のご紹介でした!