お問合せ
MENU

【簡単】Swiperでレスポンシブ対応する方法【breakpoints】

コードのこと

Swiperでレスポンシブ対応する方法

スライダーの数をPCとスマホで変えたい！

最近ではレスポンシブ対応をするサイトが当たり前ですね。スライダーもPCとスマホで数を変える必要が出てくることが多いです。

Swiperではbreakpointsというオプションを使用すれば簡単に数の設定が可能です。
実際に解説していきますね。

基本的なSwiperの導入方法

基本ファイルの読み込みや、基本的な書き方については以下記事でまとめていますのでご確認ください。

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

Swiperでレスポンシブ対応するためのbreakpoints設定

さて、ここからが本題です。レスポンシブ対応を実現するためのbreakpoints設定について詳しく説明します。

breakpointsとは？

breakpointsとは、画面サイズに応じて異なる設定を適用するためのオプションです。これを使うことで、デバイスごとに最適なスライダーの表示が可能になります。

簡単なbreakpointsの例

例えば、スマホ、タブレット、デスクトップそれぞれで異なるスライド数を表示する場合の設定例は以下の通りです。余白なども変更可能です。

const swiper = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 1//デフォルトのスライド枚数
    spaceBetween: 10, // デフォルトのスライド間の余白
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    breakpoints: {
        768: {
            slidesPerView: 2, // 768px以上では2枚表示
            spaceBetween: 20, // 768px以上ではスライド間の余白を20pxに
        },
        1024: {
            slidesPerView: 3, // 1024px以上では3枚表示
            spaceBetween: 30, // 1024px以上ではスライド間の余白を30pxに
        },
    }
});

ここで要チェックなのがSwiperのbreakpointsはmin-widthのサイズであるということ！Slickはmax-widthの書き方なので、slickに慣れている方は間違えやすいので注意です。

▼上記のコードで作成したレスポンシブ対応するスライダー

画面幅に合わせてスライドの数が変わっていますのでご確認ください。

全体のコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper Responsive</title>
    <!-- SwiperのCSSを読み込む -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
        img{
        width:100%;
        height:auto;
        }
        .swiper-container{
        position:relative;/* ボタンのズレ解消 */
        }
    </style>
</head>
<body>
    <!-- Swiperのコンテナ -->
    <div class="swiper-container">
        <!-- Swiperのラッパー。スライドを含む -->
        <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 class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat04.webp"></div>
            <div class="swiper-slide"><img src="https://nakaemon.net/demo/img/cat05.webp"></div>
        </div>
        <!-- ページネーション -->
        <div class="swiper-pagination"></div>
        <!-- ナビゲーションボタン（次へ） -->
        <div class="swiper-button-next"></div>
        <!-- ナビゲーションボタン（前へ） -->
        <div class="swiper-button-prev"></div>
    </div>

    <!-- SwiperのJavaScriptを読み込む -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        // Swiperを初期化する
        const swiper = new Swiper('.swiper-container', {
            // スライダーをループさせる設定
            loop: true,
            slidesPerView: 1, //デフォルトのスライド枚数
            spaceBetween: 10, // デフォルトのスライド間の余白
            // ページネーションの設定
            pagination: {
                el: '.swiper-pagination',
                clickable: true, // ページネーションをクリック可能にする
            },
            // ナビゲーションボタンの設定
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 自動再生の設定
            autoplay: {
                delay: 3000, // 3秒ごとにスライドを切り替える
                disableOnInteraction: false, // ユーザーが操作しても自動再生を無効にしない
            },
            // レスポンシブ対応のブレークポイント設定
            breakpoints: {
                768: {
                    slidesPerView: 2, // 768px以上では2枚表示
                    spaceBetween: 20, // 768px以上ではスライド間の余白を20pxに
                },
                1024: {
                    slidesPerView: 3, // 1024px以上では3枚表示
                    spaceBetween: 30, // 1024px以上ではスライド間の余白を30pxに
                },
            }
        });
    </script>
</body>
</html>

PCではスライドさせず、スマホサイズのみスライダーにする

実際の案件でも、例えば要素が3つあり、「パソコンでは横並びで3つ見せて、スマホでは１枚１枚横スライドにしたい」という要望は結構あります。

ここではそんな要望が来た時の実装方法についてご紹介します。

▼実際の実装例がこちら

ポイントとしてはスライドしない（PCサイズ）時の.swiper-slideの数と、jsのslidesPerViewオプションの数を一緒にすることです。

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>
</div>
        <!-- Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Navigation -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

JavaScript

const swiper = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 1,//スマホサイズでは１枚ずつスライド
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    breakpoints: {
        1024: {
            slidesPerView: 3,//PC時の表示。HTMLのスライドの数と合わせる
        },
    }
});

全体のコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper Responsive</title>
    <!-- SwiperのCSSを読み込む -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
        img{
        width:100%;
        height:auto;
        }
        .swiper-container{
        position:relative;/* ボタンのズレ解消 */
        }
    </style>
</head>
<body>
    <!-- Swiperのコンテナ -->
    <div class="swiper-container">
        <!-- Swiperのラッパー。スライドを含む -->
        <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>

    <!-- SwiperのJavaScriptを読み込む -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        // Swiperを初期化する
        const swiper = new Swiper('.swiper-container', {
            // スライダーをループさせる設定
            loop: true,
            slidesPerView: 1, //スマホサイズでは１枚ずつスライド
            // ページネーションの設定
            pagination: {
                el: '.swiper-pagination',
                clickable: true, // ページネーションをクリック可能にする
            },
            // ナビゲーションボタンの設定
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 自動再生の設定
            autoplay: {
                delay: 3000, // 3秒ごとにスライドを切り替える
                disableOnInteraction: false, // ユーザーが操作しても自動再生を無効にしない
            },
            // レスポンシブ対応のブレークポイント設定
            breakpoints: {
                1024: {
                    slidesPerView: 3, //PC時の表示。HTMLのスライドの数と合わせる
                },
            }
        });
    </script>
</body>
</html>

これで、PCサイズの時は何も動かず（スライドしない）、スマホサイズの時だけスライドされる設定が出来ました！

Swiperでレスポンシブ対応する方法まとめ

  • Swiperでレスポンシブ対応する時は「breakpoints」オプションを使う
  • Swiperのbreakpointsはmin-widthの幅指定となる（デフォルトがスマホサイズ）
  • PCで動かず、スマホだけスライダーにしたい時は、PCサイズでの「slidesPerView」の数と要素の数を同じにする

breakpointsオプションを使えば、画面サイズごとのスライド枚数や余白を自由に変えることができますよ！今回は紹介していませんが、スライドする方向を変えるなど色々なことも可能なので色々試してみてくださいね～

ブログ一覧へ