スマホ横向き対応|Swiper.jsでスマホのみスライドにする方法

サイト制作でよくPCサイズだと横並び表示で、スマホレイアウトになるとスライダーにするデザインが多いのですが、その時の問題点として、スマホを横向きにした時にブラウザ幅が変わりPCレイアウトに切り替わったのに、PCレイアウトでもスライド表示のままになってしまうということがあります。

今回はSwiper.jsライブラリを使い、Javascriptのresizeイベントを使って上記問題点をクリアしました。

画面幅変更に対応した完成形コードです

See the Pen blog_mobile_slider by 殿村 真史 (@ryngytsw-the-encoder) on CodePen.

スマホ表示の挙動はCodePenを開いて確認してみてください。

HTMLについて解説します

<div class="slide">
    <div class="slide__container js-slideContainer">
      <div class="swiper-wrapper slide__wrapper">
        <div class="swiper-slide slide__item">
          <img src="https://dl.dropbox.com/scl/fi/eab2fb8yryqkuymfu3lcl/dummy_img.png?rlkey=h7xejmw9hg2gv1t1hmyd3n6g1&st=7yyd5dj5&dl=0" alt="" class="slide__img">
        </div>
        <div class="swiper-slide slide__item">
          <img src="https://dl.dropbox.com/scl/fi/eab2fb8yryqkuymfu3lcl/dummy_img.png?rlkey=h7xejmw9hg2gv1t1hmyd3n6g1&st=7yyd5dj5&dl=0" alt="" class="slide__img">
        </div>
        <div class="swiper-slide slide__item">
          <img src="https://dl.dropbox.com/scl/fi/eab2fb8yryqkuymfu3lcl/dummy_img.png?rlkey=h7xejmw9hg2gv1t1hmyd3n6g1&st=7yyd5dj5&dl=0" alt="" class="slide__img">
        </div>
        <div class="swiper-slide slide__item">
          <img src="https://dl.dropbox.com/scl/fi/eab2fb8yryqkuymfu3lcl/dummy_img.png?rlkey=h7xejmw9hg2gv1t1hmyd3n6g1&st=7yyd5dj5&dl=0" alt="" class="slide__img">
        </div>
        <div class="swiper-slide slide__item">
          <img src="https://dl.dropbox.com/scl/fi/eab2fb8yryqkuymfu3lcl/dummy_img.png?rlkey=h7xejmw9hg2gv1t1hmyd3n6g1&st=7yyd5dj5&dl=0" alt="" class="slide__img">
        </div>
      </div>
    </div>
  </div>

HTMLはSwiper.jsのお作法に通りにクラス名を入れていき、Javascript発火部分は2行目のjs-slideContainerというクラスを付加しておきました。他は特段変わったところはないですね。

CSSについて解説します

@media (min-width: 769px) {
  .slide .slide__wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
}

.slide__img {
  width: 100%;
}

1行目の記述は769px以上のブラウザ幅(PCサイズ以上)ではグリッドレイアウトで各スライドの幅を指定して、スライドを5つ横並びにする設定にしております。

9行目でimgタグにwidth: 100%;を設置することで各スライドの幅に画像が収まるようにスタイル調整しております。

Javascriptについて解説します

let mobileSlider;

//Swiperを初期化する関数
function initSlider() {
  if (!mobileSlider) {
    mobileSlider = new Swiper('.js-slideContainer', {
      slidesPerView: 1.5,
      spaceBetween: 10,
      loop: true,
    });
  }
}

//Swiperを破棄する関数
function destroySlider() {
  if (mobileSlider) {
    mobileSlider.destroy();
    mobileSlider = null;
  }
}

//ページ読み込み時に画面幅768px未満の場合にSwiperを初期化
window.addEventListener('DOMContentLoaded', function() {
  if (window.innerWidth <= 768) {
    initSlider();
  }
});

//画面幅がリサイズ時に768px未満になった場合にSwiperを初期化、768px以上になった場合にSwiperを破棄
window.addEventListener('resize', function() {
  if (window.innerWidth <= 768) {
    if (!mobileSlider) {
      console.log('初期化');
      initSlider();
    }
  } else {
    if (mobileSlider) {
      console.log('破棄');
      destroySlider();
    }
  }
});

1行目でmobileSliderという変数を何も入れない状態で宣言しておきます。letとして、変数の中身を書き換えれるようにしておきます。最上位にmobileSliderを変数宣言しておくことで、関数内やif文内でも変数を呼び出せるようにしてあります。(ここがよくわからない人は「Javascript スコープ」などで検索して調べてみてください)

4行目ではSwiper.jsを初期化する関数を作っておきます。(初期化とはスライドを動作させるという意味)5行目のif文で!mobileSliderと条件を付けておき、mobileSliderに何も入ってない時は初期化するという条件分岐にしておき、初期化されているのに、また初期化するのを防いでいます。

15行目はSwiper.jsを破棄する関数を作っています。mobileSlider.destroy();と書くことで、mobileSliderには初期化されたswiperのデータが入っていて、.destory()と繋いで書くことで初期化されたSwiper.jsを破棄することができます。.destory()はSwiper独自のメソッドになります。
Swiper.jsを破棄する場合は必ず、Swiper.jsが初期化されていないといけないので、if文の条件分岐でmobileSlider内に何か入っていればという分岐の設定をしています。
18行目でmobileSlider = null;としているのは、後に記述しているif文の条件分岐で確実に変数内を空にしておくための記述になります。

23行目ではサイト初期表示時のSwiperの初期化の処理を書いています。24行目でif文の条件としてwindow.innerWidth <= 768と書くことでwindow.innerWidthはブラウザ幅を取得できるので、768px以下をスマホサイズとして768px以下だったら、サイトを表示した時に768px以下のブラウザ幅ならSwiper.jsを初期化するという設定にしています。この記述がないとサイト表示時にスマホサイズでスライドが動かないです。

スマホを横向きにした時の画面リサイズ時の処理を書く

30行目では、ブラウザ幅が変わった時の処理を書いていて、その場合はresizeイベントを使います。例えば、スマホを横向き表示した場合、768px以上のブラウザ幅になってしまう場合はこちらの処理が動作します。(ブラウザ幅が変わった時に動作するのがresizeイベントになります)

31行目でまずはif文の条件分岐でwindow.innerWidth <= 768と書くことで、resizeイベント時の処理を分けております。resizeイベント内のwindow.innerWidthはリサイズ時に発火するので、動的な値が入ってきます。

32行目でブラウザ幅768px以下の場合の処理を書いていて、if文で!mobileSliderと条件分岐を入れておくことで、初期化されていない場合という分岐処理を入れておくことで何度も初期化するのを防いでおります。34行目で先ほど作った初期化する関数initSlider();を発火させております。

36行目でelseとしておいて、ブラウザ幅が769px以上の場合の処理を書いており、37行目でif文でmobileSliderに値が入っている場合(初期化されている場合)という条件分岐を入れることで何度も破棄の処理を実行しないようにしていて、39行目で先ほど作った破棄する関数destroySlider();を発火させています。

今回は、Swiper.jsライブラリを使いスマホのみでスライダーを実装の解説をさせていただきました。
また疑問点やおかしな箇所などありましたら、記事のコメント欄やフォームなどからメッセージをいただけますとありがたいです。

この記事を書いた人

アバター

トノムラマサシ

masashi
Webサイト屋兼ブロガー|過去に企業常駐などを経て現在はフリーランスでディレクションとコーダーとして活動しております。JS大好きなのでJSの仕事依頼お待ちしております。京都在中で5人家族。