slick.jsにオートプレイの切り替えボタンをつける方法

今回はよく使うslick.jsにオートプレイの切り替えボタンをつけてみました。
CSSは最低限しか記載していないので変更してください。

下準備

html

<div class="js-slider"> <div><img src="https://placehold.jp/800x600.png" alt=""></div> <div><img src="https://placehold.jp/800x600.png" alt=""></div> <div><img src="https://placehold.jp/800x600.png" alt=""></div></div>
HTML

css

.autoplay-buttons[data-play="play"]:before { content: 'play';}.autoplay-buttons[data-play="stop"]:before { content: 'stop';}
CSS

JQuery

$(function() { var mySlider = $('.js-slider'); mySlider.slick({ dots: true, infinite: true, autoplay: true, autoplaySpeed: 2000, slidesToShow: 1 }); mySlider.children('.slick-dots').append("<li class='autoplay-buttons' data-play='stop'></li>"); $(".autoplay-buttons").click(function() { if ($(this).attr("data-play") == "stop") { mySlider.slick("slickPause"); $(this).attr('data-play', 'play') } else if ($(this).data('play') == 'play') { mySlider.slick("slickPlay"); $(this).attr('data-play', 'stop') } });});
JavaScript

サンプル

read next