swiper.jsでスライドを自動再生させ、ボタンのクリックで一時停止と再開を切り替えます。
htmlのコードは以下の通りです。
<div class="swiper-container js-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<button class="btn-stop">一時停止</button>
JavaScriptのコードです。
swiperのautoplay.runningプロパティで自動再生が有効か確認し、有効ならautoplay.stop();で停止、無効ならautoplay.start();で再開します。
const autoplayToggleButton = document.querySelector('.btn-auto-toggle');
var swiper01 = new Swiper('.js-slider', {
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
autoplayToggleButton.addEventListener('click', function() {
if (swiper01.autoplay.running) {
// 自動再生が実行中の場合、停止する
swiper01.autoplay.stop();
autoplayToggleButton.textContent = '再開';
} else {
// 自動再生が停止中の場合、開始する
swiper01.autoplay.start();
autoplayToggleButton.textContent = '一時停止';
}
});





