Swiperで枚数少ないときスライド止める

  • 投稿日
  • 更新日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

Swiperでスライドショーを実装していて、スライドの枚数が少ないときはSwiperを止める処理の解説。

Swiperで枚数少ないときスライド止める

コードは下記になります。なお、Swiperのバージョンは８。

  <div class="container">
    <div class="inner">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="images/test1.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="images/test2.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="images/test3.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="images/test4.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
.container {
  width: 100%;
}

.inner {
  margin-right: auto;
  margin-left: auto;
  max-width: 1000px;
}

.swiper{
  width: 100%;
  height: auto;
}


.swiper-slide{
  height: inherit;
  object-fit: cover;
  position: relative;
  cursor: pointer;
  width: 34%;
  margin-right: auto;
  margin-left: auto;
}
.swiper-slide img {
  height: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.swiper .swiper-wrapper{

  padding-top: 40px;
  padding-bottom: 40px;
  height: auto;

}


// スライドの数を取得
const slideCount = document.querySelectorAll('.swiper-slide').length;
let mySwiper = null;
if (slideCount >= 4) {
  // Swiper初期化
  let mySwiper = new Swiper('.swiper', {
    loop: true,
    slidesPerView: 3,
    autoplay: {
      delay: 3000,
    },
  });
} else {
  // Swiper解除
  if (mySwiper) {
    mySwiper.destroy(false, true);
  }
  
  // スタイルを元に戻す
  const swiperWrapper = document.querySelector('.swiper-wrapper');
  if (swiperWrapper) {
    swiperWrapper.style.width = 'auto';
  }
}

分かりづらいですが、最初は初期表示として3枚表示させ、その場合はSwiperは動きません。4枚以上になると、スライドが動きます。

JavaScriptで、以下の部分でスライド枚数を取得して変数に格納します。

// スライドの数を取得
const slideCount = document.querySelectorAll('.swiper-slide').length;

スライド枚数が4枚上のときはSwiperを動かし、そうでない場合はSwiperを解除します。

if (slideCount >= 4) {
  // Swiper初期化
  let mySwiper = new Swiper('.swiper', {
    loop: true,
    slidesPerView: 3,
    autoplay: {
      delay: 3000,
    },
  });
} else {
  // Swiper解除
  if (mySwiper) {
    mySwiper.destroy(false, true);
  }

スライダーを削除するメソッドとして、destroyメソッドを使用しています。

destroy(false, true)で、Swiperの要素自体は残しつつ、Swiperのイベントリスナーなどのデータを削除。

最後に以下の部分で、Swiperが解除された場合、スタイルを元に戻します

 // スタイルを元に戻す
  const swiperWrapper = document.querySelector('.swiper-wrapper');
  if (swiperWrapper) {
    swiperWrapper.style.width = 'auto';
  }

作っている段階では4枚以上でも、サイト公開時にはスライド枚数が少ない場合があるので、そういうときに使えそう。

ここまで読んでくださりありがとうございました。

JavaScript

この記事を書いた人

くまだ

記事一覧