• Swiper

【Swiper】デバイス幅でオプション設定を切り替える方法【ブレイクポイントを設けよう】

Swiperで、デバイス幅によってオプション設定を切り替えたい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装サンプル

See the Pen
swiper デバイス幅によってオプション設定を切り替える by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

デバイス幅が767px以上でスライドを二枚表示する設定。

767px以下でスライドをデフォルトの一枚表示になるようオプションを切り替えてます。

実装手順は以下の通りです。

breakpointsを設定しよう

const swiper = new Swiper(".swiper", {
    // 前後の矢印
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    //　ブレイクポイント     
    breakpoints: {
    // 767px以上でスライドを二枚表示
    767: {
      slidesPerView: 2,
    }
  }
});

デバイス幅によってオプションを切り替えるコード例です。

Swiperの実行関数内オブジェクトでbreakpoints: {}を定義します。

breakpoints内で任意のデバイス幅（本記事では767px以上）のブロックを作成。

上記デバイス幅で、設定したいオプションを指定すればOKです。

まとめ

Swiperで、デバイス幅によってオプション設定を切り替える方法について紹介しました。

以上で解説を終わります。