Swiperスライダーをレスポンシブ設定でPCサイズかSPサイズのみ動作させるには

2025/03/04

スマホ画面サイズだけでスライダーを表示したい、あるいはPC画面サイズだけでスライダーを有効にしたいと思ったことはありませんか？

Swiper公式ドキュメントにあるbreakpointsオプションを使っても、Swiperスライダー自体を完全に無効化はできません。

この記事では、Swiperをさわり始めて間もないコーダーの人向けに、JavaScriptで画面サイズを取得して動的に制御する方法をご紹介します。制作現場でも使うことがあるので、最後まで読んでいただければと思います。

レスポンシブでSwiperを発火させる設定を行う

私自身がSwiperに慣れてなかった頃、｢スマホ画面サイズのみスライダー表示させて｣とご依頼がありました。

前提としてPCサイズでは画像も表示させないレアな仕様でした。

それまでPCとスマホの各画面サイズで違う動作をさせることがほとんどでした。その時に使っていたのが、breakpoints というオプションです。

Swiper公式ドキュメントでは以下のように紹介されています。説明は日本語にしております。

const swiper = new Swiper('.swiper', {
  // 基本値 parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // これ以下レスポンシブ対応
  breakpoints: {
    // 画面サイズ >= 320px　以上で
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // 画面サイズ >= 480px　以上で
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // 画面サイズ 640px　以上で
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

上記のようにbreakpoints オプションを記述して画面サイズに応じて表示枚数を変更したり、スライドをフェードに変更したりと対応しておりました。このときはまだこれではダメだと気づいておりませんでした。

Swiperの無効化はbreakpointsで設定できない

breakpoints というオプションは一見、求める機能を実現できそうに思えますが、実際には以下の制限があります。

breakpoints オプションは、各ブレイクポイントでのスライドの表示数や間隔などの「設定を変更する」ためのもの
スライダー自体を完全に無効化する機能は提供されていない
発火されたSwiperは、設定が変わるだけで存在し続ける

つまり、breakpoints だけでは「特定の画面幅でスライダーを完全に無効化する」ということができないのです。

JavaScriptで動的に画面サイズを取得してSwiperを発火するかどうか判断させる

See the Pen Untitled by UCHINO (@UCHINO-web-service) on CodePen.

今回は画面幅767px以下で発火するようにしてみました。

確認するには 0.5x もしくは 0.25x を押していただくとCodepen内の画面サイズが大きくなるのでSwiperが非表示になります。

window.addEventListener('load', () => {
  // ウィンドウ幅が767px以下の場合にSwiperを初期化
  if (window.innerWidth <= 767) {
    swiper = new Swiper('.swiper', {
      slidesPerView: 2,
      loop: true,
      speed: 1000,
      autoplay: {
        delay: 1500,
        disableOnInteraction: false,
      },
      breakpoints: {
        360: {
          slidesPerView: 3,
        },
        540: {
          slidesPerView: 4,
        },
      },
    });
  }
});

if文で画面サイズを確認しています。これでSPサイズだけでSwiperを発火させることができます。

上記コードにはわかりやすくするために画面幅が切り替わった際のSwiper初期化コードは入れておりません。実際には必要に応じてコードを加えてください。