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で現在のスライド番号と総数を表示する方法

更新日:2022.11.25
88
Swiper

Swiperでサムネイル固定のスライダーを実装する方法

更新日:2022.11.25
495
Swiper

Swiperのデフォルト矢印を消して、任意の画像に変更する方法

更新日:2022.11.26
105
Swiper

左右に見え隠れするスライダーを高さ固定で実装する方法【swiperを使用】

更新日:2022.11.25
1210