スライダーが設置されているWEBサイトは、PCは3つ並びで矢印あり、スマホは1つ表示で矢印なし、など、画面幅によってデザインが異なることが多いです。

Swiperでレスポンシブ設定する場合、breakpoints:{ }を追記します。

CSSの@media指定と異なり、少し分かりにくいので、今回はSwiperスライダーの表示を画面ごとに切り替える方法についてまとめます。

Swiperのレスポンシブ設定

Swiperのbreakpointsは 「そのpx以上」 で適用される仕様です。

breakpoints: {
  768: { ... }  // 768px以上
  1024: { ... } // 1024px以上
}

breakpoints: {
  768: { ... }  // 768px以上
  1024: { ... } // 1024px以上
}

例えば、タブレット用に「768〜1023だけ適用したい」場合は1024で上書きするという考え方になります。

上のコードの場合は、768: { … }にはタブレット表示、1024: { … }にはPC表示の設定を書きます。

動きのイメージとしては以下のようになります。

全体コード例

スマホ、タブレット、PCとそれぞれ表示などを切り替えたい場合は以下のようになります。

const swiper = new Swiper(".swiper", {
  // ～767px(スマホ)
  loop: false,
  slidesPerView: 1,//1つ表示
  speed: 800,
  centeredSlides: true,
  spaceBetween: 50,
  autoHeight: false,

  breakpoints: {
    // 768px以上(タブレット)
    768: {
      slidesPerView: 2,//2つ表示
      spaceBetween: 100,
    },

    // 1024px以上（PC）
    1024: {
      slidesPerView: 3,//3つ表示
      spaceBetween: 50,
    }
  }
});

const swiper = new Swiper(".swiper", {
  // ～767px(スマホ)
  loop: false,
  slidesPerView: 1,//1つ表示
  speed: 800,
  centeredSlides: true,
  spaceBetween: 50,
  autoHeight: false,

  breakpoints: {
    // 768px以上(タブレット)
    768: {
      slidesPerView: 2,//2つ表示
      spaceBetween: 100,
    },

    // 1024px以上（PC）
    1024: {
      slidesPerView: 3,//3つ表示
      spaceBetween: 50,
    }
  }
});

タブレット指定をする必要がない場合は768: { … }部分は削除して1024: { … }のみで指定します。

まとめ

今回はSwiperスライダーのレスポンシブ設定について解説しました。

SwiperのbreakpointsはCSSのように max-width 指定はできず、

全て「min-width（以上）」ベースとなります。

PCとスマホでデザインが違う場合は、

1. まずスマホ表示を想定して指定
2. 次にbreakpointsでタブレット表示を指定
3. その後にPC表示を指定

のように覚えておきましょう。