slickで実装されたスライダーで、ボタンをクリックしたらスライダーを一時停止できるようにする方法をご紹介いたします。一時停止処理はかなり簡単に実装できちゃいます。
slickでスライダーの一時停止処理を実装する方法
まずHTML側はこんな感じです。.js-slider-controlが一時停止ボタンです。
<ul class="js-slider">
<li>
<a href="">
<img src="./assets/img/slide01.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./assets/img/slide02.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./assets/img/slide03.png" alt="">
</a>
</li>
</ul>
<button type="button" class="js-slider-control" data-control="play"></button>JavaScript側は以下のようにします。
$(function () {
//スライダーの実行
$('.js-slider').slick({
autoplay: true,
autoplaySpeed: 5000,
arrows: true,
dots: true,
infinite: true,
pauseOnHover: false,
slidesToShow: 1,
});
//一時停止処理
$('.js-slider-control').on('click', function () {
let control = $(this).attr('data-control');
if (control == 'play') {
$(this).attr('data-control', 'pause');
$('.js-slider').slick('slickPause');
} else {
$(this).attr('data-control', 'play');
$('.js-slider').slick('slickPlay');
}
});
});一時停止ボタンである.js-slider-controlをクリックしたら、スライダーを一時停止し、data-control属性の値を”pause”に書き換えています。一時停止中にボタンがクリックされたらスライダーが再度再生されます。
data-control属性の値によってCSSでアイコンを切り替えることで、一時停止と再生を視覚的にわかるようにできます。
一時停止ボタンと再生ボタンが分かれている場合
上記は1つのボタンで一時停止と再生の役割を担っていますが、一時停止と再生のボタンが分かれている場合は、下記のように記述してもOKです。.js-slider-pauseをクリックしたら一時停止、.js-slider-playをクリックしたら再生されます。
<ul class="js-slider">
<li>
<a href="">
<img src="./assets/img/slide01.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./assets/img/slide02.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./assets/img/slide03.png" alt="">
</a>
</li>
</ul>
<button type="button" class="js-slider-pause">一時停止</button>
<button type="button" class="js-slider-play">再生</button>$(function () {
//スライダーの実行
$('.js-slider').slick({
autoplay: true,
autoplaySpeed: 5000,
arrows: true,
dots: true,
infinite: true,
pauseOnHover: false,
slidesToShow: 1,
});
//一時停止処理
$('.js-slider-pause').on('click', function () {
$('.js-slider').slick('slickPause');
});
//再生処理
$('.js-slider-play').on('click', function () {
$('.js-slider').slick('slickPlay');
});
});あとがき
非常にシンプルで簡単ですね。あんまりないかもしれませんが、スライダーに一時停止処理を実装したい時は、ぜひ参考にしていただければと思います。