【Swiper】スマホだけスライダーにする方法(ブレイクポイント切り替え)

Swiperでスマホだけスライダーにする方法ない？

例えばパソコンでは画像を3枚横並びにして、スマホでは横並びだと幅が狭いのでスライダーにしたい、という事はあると思います。

そこで今回はSwiperでスマホのみスライダーにする方法を解説します。

Swiperの基本的な使い方についてはこちらの記事を参照下さい。

Swiperでスマホだけスライダーにする方法（ブレイクポイント切り替え）

まずは基本となるスライダーを見てみます。

See the Pen
Swiper（矢印、ドットインジケーター） by junpei (@junpei-sugiyama)
on CodePen.

前後の矢印、ページネーションが表示されているシンプルなスライダーです。

これをPCでは3枚表示にさせ、スマホでは1枚表示のスライダーにしたいと思います。

ちなみにスマホというのはデバイスで判断するのではなく、ブレイクポイントで判断します（今回は500px未満で切り替え）

コード解説

それではコードを解説していきます。

HTML

まずHTMLはこちらです。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス1" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス2" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス3" alt="" />
    </div>
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
  <!-- 前後の矢印 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

これは基本形と同じです。

CSS

CSSはこちらです。

/* PC時のスタイル */
@media screen and (min-width: 501px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
  .swiper-wrapper {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 画像のサイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

スマホの時はスライダーにするのでそのままでも大丈夫ですが、パソコン用のスタイルを書く必要があります。

矢印はパソコン時には非表示にしないと機能はしないのに表示されてしまいます。

今回は横並びにdisplay: grid;を使っていますが、他にも方法はあるかも知れません。

JavaScript

そしてJavaScriptはこちらです。

const swiperSlides = document.getElementsByClassName("swiper-slide");
const breakPoint = 500; // ブレークポイントを設定
let swiper;
let swiperBool;

window.addEventListener(
  "load",
  () => {
    if (breakPoint < window.innerWidth) {
      swiperBool = false;
    } else {
      createSwiper();
      swiperBool = true;
    }
  },
  false
);

window.addEventListener(
  "resize",
  () => {
    if (breakPoint < window.innerWidth && swiperBool) {
      swiper.destroy(false, true);
      swiperBool = false;
    } else if (breakPoint >= window.innerWidth && !swiperBool) {
      createSwiper();
      swiperBool = true;
    }
  },
  false
);

const createSwiper = () => {
  swiper = new Swiper(".swiper", {
    loop: true, // ループさせる
    speed: 1500, // 少しゆっくり(デフォルトは300)
    autoplay: {
      // 自動再生
      delay: 1000, // 1秒後に次のスライド
      disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
    },
    // ページネーション
    pagination: {
      el: ".swiper-pagination",
      clickable: true, // クリック可能にする
    },
    // 前後の矢印
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
};

長いコードですが、変更するのは2行目のブレークポイントの数字と、下の方の通常のオプションだけでOKです。

ここで画面幅500px以上の時はスライダーを無しにして、500px未満の時はスライダーにしています。