お問合せ
MENU

【簡単】Swiperを縦スクロールに設定する手順

コードのこと

今回はSwiperを縦スクロールに設定し、矢印を上下に配置する方法を紹介します！

WEBサイトのデザインによっては縦スクロールを取り入れるとちょっとした変化が演出出来て素敵です。
簡単な手順で設定できるので、一緒にやってみましょう！

Swiperの基本設定

Swiperは特定の2ファイルを読み込み、HTMLとJavaScriptで設定すると簡単に実装できます。
2ファイルはCDNでも利用できますし、ファイルをダウンロードして利用することも可能です。

SwiperのCDN

<!-- CDNリンクの例 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

SwiperのHTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp"></div>
        <!-- Add more slides as needed -->
    </div>
    <!-- 必要に応じてページネーションやナビゲーションボタンを追加 -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
const swiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});


Swiperをはじめて使う方は以下の記事で基本の使い方を説明していますので、まずは基本からしっかり確認してみてくださいね！

【初心者向け】Swiperの基本的な使い方と設定方法

Swiperで縦スクロールを実装する

CSSの設定

縦スクロールを実現するためには、Swiperの高さを指定する必要があります。また、矢印を上下に配置するためのCSSも追加します。

/* Swiperの高さを指定する */
.swiper-container {
    width: 100%;
    height: 100vh; /* ビューポートの高さを使用 */
}

/* 矢印を上下に配置 */
.swiper-button-next {
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.swiper-button-prev {
    top: 40px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

これで、矢印が上下に表示され、上下方向にスライドを移動させることができます。

JavaScriptの設定

次に、Swiperを縦スクロールに設定するためのJavaScriptを追加します。

const swiper = new Swiper('.swiper-container', {
    direction: 'vertical', // 縦スクロールに設定
    loop: true, // ループ設定（任意）
    speed: 800, // スライドのスピードを設定
    autoplay: {
        delay: 3000, // オートプレイの設定
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

directionを’vertical’に設定することで、縦スクロールのSwiperになります。

全体のコード例

ここまでの設定を統合した全体のコード例を紹介します。実際に試してみてくださいね。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <title>縦スクロールSwiperの設定</title>
    <style>
        .swiper-container {
            width: 100%;
            height: 400px;
            position:relative;
            overflow:hidden;
        }
        
        .swiper-slide img{
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center center;
        }

        .swiper-button-next {
            top: auto;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%) rotate(90deg);
        }

        .swiper-button-prev {
            top: 40px;
            bottom: auto;
            left: 50%;
            transform: translateX(-50%) rotate(90deg);
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat01.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat02.webp"></div>
        <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat03.webp"></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            loop: true,
            speed: 800, // スライドのスピードを設定
            autoplay: {
                delay: 3000, // オートプレイの設定
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</body>
</html>

実際のSwiperの縦スクロールの表示

よくあるトラブル

スライドが表示されないトラブル
高さ設定を確認してください。height: 100vh などの設定がないと、スライドが見えなくなります。

loopでスライドが止まってしまう
要素内に見えているスライドの枚数の2倍以上のswiper-slideを入れないとSwiperのバージョンによってはループが止まってしまいます。2倍以上のswiper-slideを入れましょう。

Swiperを縦スクロールにする設定のまとめ

この記事のポイントをまとめます。

  • Swiperを縦スクロールに設定するには、directionを'vertical'に変更します。
  • CSSでSwiperコンテナの高さを指定して、縦方向のスクロールスペースを確保します。
  • 矢印を上下に配置するために、swiper-button-nextとswiper-button-prevのCSSを調整します。
  • オートプレイやスピードの調整も可能です。

縦スクロールのSwiper設定はdirection: ‘vertical’のオプションを追加するだけなので簡単ですよね♪
英字を縦方向に動かしたり、紙芝居風のコンテンツを作成したりと用途も広いです。
ぜひ楽しんで実装してくださいね！

ブログ一覧へ