【bxSlider】一時停止ボタンの追加や､ホバー中は一時停止する方法

標準機能による一時停止・再生

まずはbxSlider標準機能による､一時停止・再生ボタンの追加方法｡

オプションを追加するだけで､右下に一時停止・再生ボタンを追加できます｡

オプション「autoControls」をtrueにするだけ｡

$("#bxslider").bxSlider({
	auto: true,
	autoControls: true, //一時停止・再生ボタン追加
});

ただこれだと､HTMLを自由にカスタマイズできないので､見た目にこだわりたい方は次の方法をご覧ください｡

自分で一時停止・再生ボタンを追加する方法

自分でカスタマイズしたボタンを追加する方法｡一時停止・再生ボタンをクリックしてみてください｡

HTMLはこんな感じ｡スライダーと､一時停止・再生ボタンを用意します｡

<div id="bxslider">
	<div class="slide"><img src="img01.jpg"></div>
	<div class="slide"><img src="img02.jpg"></div>
	<div class="slide"><img src="img03.jpg"></div>
	<div class="slide"><img src="img04.jpg"></div>
</div>

<button id="bxslider_pause">一時停止</button>
<button id="bxslider_start">再生</button>

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

で､肝心のJSはこんな感じ｡

const slider = $("#bxslider").bxSlider({
	//オプションはお好みで
	auto: true
});

//一時停止
$("#bxslider_pause").on("click", function(){
	slider.stopAuto();
});

//再生
$("#bxslider_start").on("click", function(){
	slider.startAuto();
});

bxSliderを変数 slider にセットしておき
一時停止をクリックしたら slider.stopAuto(); で一時停止
再生をクリックしたら slider.startAuto(); で再生できます｡

1つのボタンで一時停止・再生を切り替える

こんなボタンの追加方法｡

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

<div id="bxslider">
	<div class="slide"><img src="img01.jpg"></div>
	<div class="slide"><img src="img02.jpg"></div>
	<div class="slide"><img src="img03.jpg"></div>
	<div class="slide"><img src="img04.jpg"></div>
</div>

<button id="bxslider_pause">一時停止・再生</button>

JSで､ボタンに .paused クラスを取ったり付けたりして一時停止・再生を切り替えます｡

const slider = $("#bxslider").bxSlider({
	auto: true,
	pause: 1500
});

//ボタンをクリックしたとき
$("#bxslider_pause").on("click", function(){
	if($(this).hasClass("paused")){
		//一時停止中のとき
		//再開
		slider.startAuto();
		//.paused削除
		$(this).removeClass("paused");
	}else{
		//再生中のとき
		//一時停止
		slider.stopAuto();
		//paused付与
		$(this).addClass("paused");
	}
});

ホバー中は一時停止する方法

スライダーをマウスホバーしている間は一時停止する方法｡

他のスライダープラグインの「slick」とかだとデフォルトでそうですね｡

ホバー中は一時停止するはずです｡

HTML｡ bxsliderをさらにdivで囲います｡

<div class="bx_wrap">
	<div id="bxslider">
		<div class="slide"><img src="img01.jpg"></div>
		<div class="slide"><img src="img02.jpg"></div>
		<div class="slide"><img src="img03.jpg"></div>
		<div class="slide"><img src="img04.jpg"></div>
	</div>
</div>

JSで､マウスポインタが .bx_wrap に乗ったら一時停止｡出たら再生します｡

const slider = $("#bxslider").bxSlider({
	auto: true
});

$('.bx_wrap').mouseover(function(e) {
	//一時停止
	slider.stopAuto();
}).mouseout(function(e) {
	//再開
	slider.startAuto();
});

【bxSlider】一時停止ボタンの追加や､ホバー中は一時停止する方法

目次

標準機能による一時停止・再生

自分で一時停止・再生ボタンを追加する方法

1つのボタンで一時停止・再生を切り替える

ホバー中は一時停止する方法

コメント