【PR】を含みます。

フロントエンド

【swiper.js】一定速度で流れ続けるスライドショーをホバー時に一時停止する方法

swiper.js 一定速度で流れ続けるスライドショーをホバー時に一時停止する方法

「swiper.js」で一定速度で流れ続けるスライドショーをホバー時に一時停止する方法をメモとして残しておきます。

既存オプションのpauseOnMouseEnter: trueでも一時停止することができますが、停止するまでにタイムラグが発生します。

そのため、今回はホバー時に即時停止するようJavaScriptをカスタマイズしました。

POINT
  • 「swiper.js」のバージョンについて
    v8のCDNを使用
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    ※v9以降の「swiper.js」では、ロジック変更が入っているため上手く動作しません。

    最新のCDNバージョンは下記公式サイトでご確認いただけます。
    https://swiperjs.com/get-started#use-swiper-from-cdn

デモ

スライダーの上にマウスカーソルを乗せるとスライドショーが一時停止します。

スライド 1
スライド 2
スライド 3
スライド 4
スライド 5

コピペ用コード

下記HTML・CSS・JavaScriptをコピペすることで、一定速度で流れ続けるスライドショーをホバー時に一時停止させることができます。

「swiper.js」の使用には、事前に「swiper.js」ファイルの読み込みが必要です。

下記はCDNで読み込んでいます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

HTML
Copy
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド 1</div>
    <div class="swiper-slide">スライド 2</div>
    <div class="swiper-slide">スライド 3</div>
    <div class="swiper-slide">スライド 4</div>
    <div class="swiper-slide">スライド 5</div>
  </div>
</div>
CSS
Copy
.swiper-wrapper {
  transition-timing-function: linear;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 150px;
}
.swiper-slide:nth-child(5n + 1) {
  background-color: #CCFFB2;
}
.swiper-slide:nth-child(5n + 2) {
  background-color: #B2FFF4;
}
.swiper-slide:nth-child(5n + 3) {
  background-color: #B7B2FF;
}
.swiper-slide:nth-child(5n + 4) {
  background-color: #FFB2EA;
}
.swiper-slide:nth-child(5n + 5) {
  background-color: #FFD6B2;
}
JavaScript
Copy
(function() {
  let speed = 5000;
  const mySwiper = new Swiper('.swiper', {
    loop: true,
    slidesPerView: 'auto',
    speed: speed,
    spaceBetween: 10,
    allowTouchMove: false,
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
    },
  });
  let getTranslate;
  document.querySelectorAll('.swiper').forEach(function(e){
    e.addEventListener('mouseover', function () {
      getTranslate = mySwiper.getTranslate();
      mySwiper.setTranslate(getTranslate);
      mySwiper.setTransition(0);
    });
    e.addEventListener('mouseout', function () {
      getTranslate = mySwiper.getTranslate();
      let getSlideWidthMgLeft = document.querySelector('.swiper-slide-active').style.marginLeft;
      if (getSlideWidthMgLeft) {
        getSlideWidthMgLeft = parseFloat(getSlideWidthMgLeft);
      } else {
        getSlideWidthMgLeft = 0;
      }
      let getSlideWidthMgRight = document.querySelector('.swiper-slide-active').style.marginRight;
      if (getSlideWidthMgRight) {
        getSlideWidthMgRight = parseFloat(getSlideWidthMgRight);
      } else {
        getSlideWidthMgRight = 0;
      }
      let getSlideWidth = document.querySelector('.swiper-slide-active').offsetWidth;
      let getTotalSlideWidth = getSlideWidthMgLeft + getSlideWidthMgRight + getSlideWidth;
      let diff = - getTotalSlideWidth - (getTranslate % getTotalSlideWidth);
      let diffTime = diff / -getSlideWidth;
      mySwiper.setTranslate(getTranslate + diff);
      mySwiper.setTransition(speed * diffTime);
    });
  });
})();

使用方法　Q&A

上手く動かないときに確認することは？

1.「swiper.js」のバージョンがv9以降でないことを確認してください。

本記事ではバージョン「v8」を使用しております。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>


2.スライドの数が足りているか確認してください。

足りない場合はスライドを追加してください。(ループ可能なスライド枚数が必要です。)

また、CSSでスライドの幅を調整、「swiper.js」のオプションで1画面に表示する枚数を調整する等でも対応可能です。

まとめ

本記事では、swiper.js（v8）を使って「一定速度で流れ続けるスライドショーを、ホバー時に即時停止させる方法」について解説しました。

既存のpauseOnMouseEnterオプションではタイムラグが発生するため、JavaScriptでカスタマイズすることで、より直感的なユーザー体験を実現できます。

swiper.jsのバージョンやスライド数に注意しながら、ぜひご自身のサイトでも活用してみてください。

-フロントエンド
-,