[slick.js] How to add pause and play buttons to a slider

2023-09-14

Here's how to add pause and play buttons to a slider using the jQuery slider plugin "slick.js".

Basic Sample
Single Button Sample
Sample: Placing the Pause Button Next to the Dots
Notes when setting up multiple sliders

Basic Sample

Click "Pause" to temporarily stop the slider.
Click "Play" to restart it.

HTML

Here's the HTML.
Prepare the slider, a pause button, and a play button.

<div class="slider">
	<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 class="row_btns">
	<button class="slick_pause">Pause</button>
	<button class="slick_start">Play</button>
</div>

The "Pause" and "Play" buttons don't necessarily have to be button tags.

JS

Here's the JS.

$(function(){
	$(".slider").slick({
		// Customize slick settings as desired.
		autoplay: true,
		autoplaySpeed: 800,
		centerMode: true,
		variableWidth: true
	});

	// Pause when "Pause" is clicked
	$(".slick_pause").on("click", function() {
		$(".slider").slick("slickPause");
	});

	// Resume when "Play" is clicked
	$(".slick_start").on("click", function() {
		$(".slider").slick("slickPlay");
	});
});

When "Pause" is clicked, the slider is temporarily stopped using the "slickPause" method.

When "Play" is clicked, autoplay is resumed using the "slickPlay" method.

Click here for the official slick documentation

Single Button Sample

This is a sample that toggles slider play/pause with a single button.

Click the button below to toggle between play and pause.

HTML

Here's the HTML.

<div class="slider">
	<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><button class="slick_pause">Pause/Play</button></div>

The "Pause/Play" button doesn't necessarily have to be a button tag.

JS

We toggle between pause and play by adding and removing the ".paused" class to/from .slick_pause.

$(".slider").slick({
	// Customize slick settings as desired.
	autoplay: true,
	autoplaySpeed: 800,
	centerMode: true,
	variableWidth: true
});

// When the button is clicked
$(".slick_pause").on("click", function() {
	// If paused
	if($(this).hasClass("paused")){
		// Resume
		$(".slider").slick("slickPlay");
		// Remove ".paused"
		$(this).removeClass("paused");
	}else{
		// If playing
		// Pause
		$(".slider").slick("slickPause");
		// Add ".paused"
		$(this).addClass("paused");
	}
});

Sample: Placing the Pause Button Next to the Dots

This is a sample for placing the pause/play button next to the dots, considering design aspects.

HTML

Here's the HTML. The pause button will be added with JS.

<div class="slider">
	<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>

JS

We toggle between pause and play by adding and removing the ".paused" class to/from .slick_pause.

$(".slider").slick({
	// Customize slick settings as desired.
	autoplay: true,
	dots: true, // Set dots to true
	autoplaySpeed: 800,
	centerMode: true,
	variableWidth: true
});

// Wrap dots in a div
$(".slider .slick-dots").wrap('<div class="slick_control">');
// Add a pause button to that div
$(".slick_control").append('<button class="slick_pause">Pause/Play</button>');

// When the button is clicked
$(".slick_pause").on("click", function() {
	// If paused
	if($(this).hasClass("paused")){
		// Resume
		$(".slider").slick("slickPlay");
		// Remove ".paused"
		$(this).removeClass("paused");
	}else{
		// If playing
		// Pause
		$(".slider").slick("slickPause");
		// Add ".paused"
		$(this).addClass("paused");
	}
});

CSS

This is the minimum required CSS. Feel free to customize it further.

/* Remove initial slick-dots styles */
.slider .slick_control .slick-dots {
	position: static;
	bottom: auto;
	width: auto;
}

/* Styles for slick_control wrapping dots and button */
.slider_side_dots .slick_control {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

Notes when setting up multiple sliders

If you set up multiple pauseable sliders on the same page, they might pause or play incorrectly with the above code. Please modify it as follows.

For HTML, wrap the slider and button in a div.

<div class="slider_wrap">
	<div class="slider">
		<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><button class="slick_pause">Pause/Play</button></div>
</div>

For JS, after executing slick as usual,
loop through the part from line 10 onwards using `each`.

$(".slider").slick({
	autoplay: true,
	autoplaySpeed: 800,
	centerMode: true,
	variableWidth: true,
	pauseOnHover: false
});

// When the button is clicked
$(".slider_wrap").each(function(){
	let slider = $(this).find(".slider");
	let btn = $(this).find(".slick_pause");
	btn.on("click", function() {
		// If paused
		if($(this).hasClass("paused")){
			// Resume
			slider.slick("slickPlay");
			// Remove ".paused"
			$(this).removeClass("paused");
		}else{
			// If playing
			// Pause
			slider.slick("slickPause");
			// Add ".paused"
			$(this).addClass("paused");
		}
	});
});