kdcsライブラリー

swiperでページネーションやナビゲーションボタンを.swiperの外側に出して表示位置をカスタマイズしているとき、スライド要素が1つしかない場合はナビゲーションを非表示にしておきたい。

以下のオプション設定で、スライド要素の数を確認し、1つの場合はstyleでdisplay:noe;を付けて非表示にする。
※基本的には、’#eventAd .custom-navigation’これだけをdisplay:noneにすればよい

const swiper2 = new Swiper('.eventAdSlider', {
  loop: true,
  parallax: true, // パララックスさせる
  allowTouchMove: false, // マウスでのスワイプを禁止
  speed: 1500,
  autoplay: {
    delay: 5000, // 5秒ごとに自動再生
    disableOnInteraction: false, // ユーザー操作後も自動再生を継続
  },
  pagination: {
    el: '#eventAd .swiper-pagination',
  },
  navigation: {
    nextEl: '#eventAd .swiper-button-next',
  },
  on: {
    init: function () {
// スライド要素が1つの場合、カスタムナビ非表示（loop:true の場合、クローン要素も含まれるので注意）
      const realSlideCount = this.slides.filter(slide => !slide.classList.contains('swiper-slide-duplicate')).length;
      if (realSlideCount <= 1) {
        document.querySelector('#eventAd .custom-navigation').style.display = 'none';
        document.querySelector('#eventAd .swiper-button-next').style.display = 'none';
        document.querySelector('#eventAd .swiper-button-prev').style.display = 'none';
        document.querySelector('#eventAd .swiper-pagination').style.display = 'none';
      }
    }
  }
});

非表示にする必要が無い場合はこちら

const swiper2 = new Swiper('.eventAdSlider', {
  loop: true,
  parallax: true, // パララックスさせる
  allowTouchMove: false, // マウスでのスワイプを禁止
  speed: 1500,
  autoplay: {
    delay: 5000, // 5秒ごとに自動再生
    disableOnInteraction: false, // ユーザー操作後も自動再生を継続
  },
  pagination: {
    el: '#eventAd .swiper-pagination',
  },
  navigation: {
    nextEl: '#eventAd .swiper-button-next',
  },
});

レスポンシブデザインで、swiperのサムネイル連動スライドを設置するとfirefoxでサムネイルが画面幅変更時にちらつく。

これを防止する方法

swiperのサムネ要素（divタグに.swiper-slideのクラスが付いている）にcssを足す
※強制的に指定するので、!importantが必要
※複数個所ある場合、「#hogehoge」の部分を合わせる

#hogehoge-thumbnail .swiper-slide {
    transform: none !important;
}

copilot

基本的な実装方法
html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <video src="video01.mp4" controls></video>
    </div>
    <div class="swiper-slide">
      <video src="video02.mp4" controls></video>
    </div>
    <div class="swiper-slide">
      <video src="video03.mp4" controls></video>
    </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

・controls を付けると再生・停止ボタンが表示されます。
・autoplay や loop などの属性も使えるが、ユーザー体験を考慮して慎重に設定する必要あり

スライド切り替え時に動画を自動再生・一時停止する
JavaScriptでSwiperのイベントを使って、スライドが切り替わるタイミングで動画を制御できる
javascript

const swiper = new Swiper('.swiper-container', {
  on: {
    transitionStart: function () {
      document.querySelectorAll('video').forEach(video => video.pause());
    },
    transitionEnd: function () {
      const activeSlide = document.querySelector('.swiper-slide-active');
      const video = activeSlide.querySelector('video');
      if (video) video.play();
    }
  }
});

現在表示されているスライドの動画だけが再生される
・動画ファイルのサイズが大きい場合は preload=”none” を使うと読み込みが軽くなる
・モバイル環境では autoplay が制限されることがある

Swiperで静止画と動画が混在するスライダー

実現するためのポイント
・Swiperの自動スライド（autoplay）を使う
・動画スライドが表示されたら autoplay を停止
・動画の再生が終わったら autoplay を再開

javascript

const swiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  on: {
    slideChangeTransitionStart: function () {
      const videos = document.querySelectorAll('video');
      videos.forEach(video => video.pause());

      const activeSlide = document.querySelector('.swiper-slide-active');
      const video = activeSlide.querySelector('video');

      if (video) {
        swiper.autoplay.stop(); // スライド停止
        video.play();

        // 動画再生終了時にスライド再開
        video.onended = () => {
          swiper.autoplay.start();
        };
      }
    }
  }
});

・autoplay.stop() と autoplay.start() を使えば、Swiperの自動スライドを制御できる
・video.onended は動画の再生が終わったタイミングを検知する
・静止画スライドでは通常通り autoplay が動作