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

デモ
コピペ用コード
使用方法　Q&A
- 上手く動かないときに確認することは？

「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・JavaSctiptをコピペすることで、一定速度で流れ続けるスライドショーをホバー時に一時停止させることができます。

「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 {
width: 200px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.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;
}

JavaSctipt

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);
});
});
})();