Written by Kasumi

【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で、デバイス幅によってオプション設定を切り替える方法について紹介しました。

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

目次

関連記事

Swiper

swiperスライダーで前後の矢印を外に出す方法

2023.09.24
297
Swiper

Swiperスライダーで最初に表示されるスライド位置を変更する方法

更新日:2022.11.25
3820
Swiper

Swiperスライダーでスライドが切り替わるのを検知。任意の処理を実行する方法

更新日:2023.01.25
2302
Swiper

【Swiper】自動で無限に横スクロールされるスライダーを実装する方法

2023.11.19
106