【Swiper】スライダーの一時停止・再生ボタンを追加する方法

HTML

スライダーと､ボタンを2つ用意します｡

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img01.jpg"></div>
		<div class="swiper-slide"><img src="img02.jpg"></div>
		<div class="swiper-slide"><img src="img03.jpg"></div>
	</div>
	<!-- ドット -->
	<div class="swiper-pagination"></div>
	<!-- ページャー -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

<!-- ボタン -->
<button class="swiper_pause">停止</button>
<button class="swiper_start">再生</button>

停止・再生ボタンは <button> タグじゃなくても大丈夫です｡

JS

JSはこんな感じ｡

const swiper = new Swiper(".swiper", {
	loop: true,
	autoplay: { // 自動再生
		delay: 1000, //自動再生のスピード
		disableOnInteraction: false, //矢印をクリックしても自動再生を止めないようにする
	},
	pagination: {
		el: ".swiper-pagination",
		clickable: true
	},
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev"
	},
	breakpoints: {
		768: { //768px以上なら次を適用
			slidesPerView: 1.5, //左右のスライドチラ見せ
			centeredSlides: true, //左右のスライドチラ見せ
		}
	}
});

//一時停止
document.querySelector(".swiper_pause").addEventListener("click", function(){
	swiper.autoplay.stop();
});
//再生
document.querySelector(".swiper_start").addEventListener("click", function(){
	swiper.autoplay.start();
});

Swiperのオプションはお好みでどうぞ｡

肝心なのは23行目以降｡ 一時停止と再生を定義しています｡

jQueryがよければ､こんな感じでも大丈夫ですよ｡

//一時停止
$(".swiper_pause").on("click", function(){
	swiper.autoplay.stop();
});
//再生
$(".swiper_start").on("click", function(){
	swiper.autoplay.start();
});

swiper.autoplay.stop(); //停止
swiper.autoplay.start(); //再生

swiper.stopAutoplay(); //停止
swiper.startAutoplay(); //再生

HTML

スライダーと､ボタンを1つ用意します｡

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img01.jpg"></div>
		<div class="swiper-slide"><img src="img02.jpg"></div>
		<div class="swiper-slide"><img src="img03.jpg"></div>
	</div>
	<!-- ドット -->
	<div class="swiper-pagination"></div>
	<!-- ページャー -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

<!-- ボタン -->
<button class="swiper_pause">停止・再生</button>

停止・再生ボタンは <button> タグじゃなくても大丈夫です｡

JS

JSはこんな感じ｡ Swiperの部分は先ほどと同じです｡

const swiper = new Swiper(".swiper", {
	loop: true,
	autoplay: { // 自動再生
		delay: 1000, //自動再生のスピード
		disableOnInteraction: false, //矢印をクリックしても自動再生を止めないようにする
	},
	pagination: {
		el: ".swiper-pagination",
		clickable: true
	},
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev"
	},
	breakpoints: {
		768: { //768px以上なら次を適用
			slidesPerView: 1.5, //左右のスライドチラ見せ
			centeredSlides: true, //左右のスライドチラ見せ
		}
	}
});

//一時停止・再生
document.querySelector(".swiper_pause").addEventListener("click", function(){
	//.paused があるとき
	if(this.classList.contains("paused")){
		swiper.autoplay.start(); //再生
		this.classList.remove("paused"); //.paused 削除
	}else{
		//.paused が無いとき
		swiper.autoplay.stop(); //一時停止
		this.classList.add("paused"); //.paused 付与
	}
});

Swiperのオプションはお好みでどうぞ｡

肝心なのは23行目以降で､ボタンに「.paused」クラスを取ったり付けたりして､停止・再生を切り替えています｡

jQueryがよければ､こんな感じでも大丈夫ですよ｡

$(".swiper_toggle").on("click", function(){
	//.paused があるとき
	if($(this).hasClass("paused")){
		swiper.autoplay.start(); //再生
		$(this).removeClass("paused"); //.paused 削除
	}else{
		//.paused が無いとき
		swiper.autoplay.stop(); //一時停止
		$(this).addClass("paused"); //.paused 付与
	}
});

swiper.autoplay.stop(); //停止
swiper.autoplay.start(); //再生

swiper.stopAutoplay(); //停止
swiper.startAutoplay(); //再生