[bxSlider] How to add a pause button or pause on hover

Pause/Play with Standard Features

First, let's look at how to add pause/play buttons using bxSlider's standard features.

You can add pause/play buttons to the bottom right by simply adding an option.

Just set the "autoControls" option to true.

$("#bxslider").bxSlider({
	auto: true,
	autoControls: true, //Add pause/play buttons
});

However, with this method, you cannot freely customize the HTML, so if you want to customize the appearance, please see the next method.

How to Add Your Own Pause/Play Buttons

How to add your own customized buttons. Try clicking the pause/play buttons.

The HTML looks like this. Prepare the slider and the pause/play buttons.

<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">Pause</button>
<button id="bxslider_start">Play</button>

The pause/play buttons don't necessarily have to be <button> tags.

And here's the essential JavaScript.

const slider = $("#bxslider").bxSlider({
	//Options as you like
	auto: true
});

//Pause
$("#bxslider_pause").on("click", function(){
	slider.stopAuto();
});

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

Set bxSlider to the variable slider.
Clicking pause will pause with slider.stopAuto();
Clicking play will resume with slider.startAuto();

PR

Toggle Pause/Play with a Single Button

Here's how to add such a button.

For HTML, prepare the slider and one button.

<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">Pause/Play</button>

In JavaScript, toggle pause/play by adding or removing the .paused class from the button.

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

//When the button is clicked
$("#bxslider_pause").on("click", function(){
	if($(this).hasClass("paused")){
		//When paused
		//Resume
		slider.startAuto();
		//Remove .paused
		$(this).removeClass("paused");
	}else{
		//When playing
		//Pause
		slider.stopAuto();
		//Add paused
		$(this).addClass("paused");
	}
});

How to Pause on Hover

How to pause the slider while hovering over it with the mouse.

Other slider plugins like "slick" do this by default.

It should pause on hover.

HTML. Wrap bxslider in another 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>

In JavaScript, pause when the mouse pointer enters .bx_wrap. Resume when it leaves.

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

$('.bx_wrap').mouseover(function(e) {
	//Pause
	slider.stopAuto();
}).mouseout(function(e) {
	//Resume
	slider.startAuto();
});