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

2023-09-14

jQueryのスライダープラグイン「slick.js」でスライダーの一時停止・再生ボタンを追加する方法をご紹介します｡

基本のサンプル

「停止」をクリックすると､スライダーが一時停止
「再生」をクリックすると再スタートします｡

HTML

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 class="row_btns">
	<button class="slick_pause">停止</button>
	<button class="slick_start">再生</button>
</div>

「停止」「再生」はbuttonタグじゃなくても大丈夫です｡

JS

JSはこんな感じ｡

$(function(){
	$(".slider").slick({
		//slickの設定はお好みで｡
		autoplay: true,
		autoplaySpeed: 800,
		centerMode: true,
		variableWidth: true
	});

	//「停止」が押されたら一時停止
	$(".slick_pause").on("click", function() {
		$(".slider").slick("slickPause");
	});

	//「再生」が押されたら再開
	$(".slick_start").on("click", function() {
		$(".slider").slick("slickPlay");
	});
});

「停止」が押されたら「slickPause」メソッドを使い､スライダーを一時停止

「再生」が押されたら「slickPlay」メソッドを使い､自動再生を再開しています｡

slick公式ドキュメントはこちら

1ボタンのサンプル

1つのボタンでスライダーの再生・停止を切り替えるサンプルです｡

下のボタンをクリックすると､再生・停止が切り替わります｡

HTML

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">停止・再生</button></div>

「停止・再生」はbuttonタグじゃなくても大丈夫です｡

JS

.slick_pauseに「.paused」クラスを付けたり外したりして､停止と再生を切り替えています｡

$(".slider").slick({
	//slickの設定はお好みで｡
	autoplay: true,
	autoplaySpeed: 800,
	centerMode: true,
	variableWidth: true
});

//ボタンをクリックしたとき
$(".slick_pause").on("click", function() {
	//一時停止中なら
	if($(this).hasClass("paused")){
		//再開
		$(".slider").slick("slickPlay");
		//「.paused」削除
		$(this).removeClass("paused");
	}else{
		//再生中なら
		//一時停止
		$(".slider").slick("slickPause");
		//「.paused」付与
		$(this).addClass("paused");
	}
});

一時停止ボタンをドットの隣に置くサンプル

デザインの兼ね合いで､ドットの隣に一時停止・再生ボタンを設置するサンプルです｡

HTML

HTMLはこんな感じ｡一時停止ボタンは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

.slick_pauseに「.paused」クラスを付けたり外したりして､停止と再生を切り替えています｡

$(".slider").slick({
	//slickの設定はお好みで｡
	autoplay: true,
	dots: true, //dotsをtrueに
	autoplaySpeed: 800,
	centerMode: true,
	variableWidth: true
});

//dotsをdivで挟む
$(".slider .slick-dots").wrap('<div class="slick_control">');
//そのdivに一時停止ボタンを追加
$(".slick_control").append('<button class="slick_pause">停止・再生</button>');

//ボタンをクリックしたとき
$(".slick_pause").on("click", function() {
	//一時停止中なら
	if($(this).hasClass("paused")){
		//再開
		$(".slider").slick("slickPlay");
		//「.paused」削除
		$(this).removeClass("paused");
	}else{
		//再生中なら
		//一時停止
		$(".slider").slick("slickPause");
		//「.paused」付与
		$(this).addClass("paused");
	}
});

CSS

必要最低限のCSSです｡あとはお好みで設定してください｡

/* slick-dotsの初期スタイルを解除 */
.slider .slick_control .slick-dots {
	position: static;
	bottom: auto;
	width: auto;
}

/* ドットとボタンを囲うslick_controlのスタイル */
.slider_side_dots .slick_control {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

スライダーを複数設置する際の注意点

一時停止スライダーを同ページ内に複数設置する場合は､上記のままだと違うスライダーが一時停止したり再生したりしてしまうので､次のように改修してください｡

HTMLはスライダーとボタンを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">停止・再生</button></div>
</div>

JSは通常通りslickを実行したあと
10行目以降の部分をeachで回すようにしてください｡

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

//ボタンをクリックしたとき
$(".slider_wrap").each(function(){
	let slider = $(this).find(".slider");
	let btn = $(this).find(".slick_pause");
	btn.on("click", function() {
		//一時停止中なら
		if($(this).hasClass("paused")){
			//再開
			slider.slick("slickPlay");
			//「.paused」削除
			$(this).removeClass("paused");
		}else{
			//再生中なら
			//一時停止
			slider.slick("slickPause");
			//「.paused」付与
			$(this).addClass("paused");
		}
	});
});