【slick.js】スライダーの一時停止・再生ボタンを追加する方法
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」メソッドを使い､自動再生を再開しています｡
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");
}
});コメント
「できました！」などの報告もお待ちしております｡
