slick.jsに一時停止機能をつける

slick.jsを一時停止できるようにします。最低限しか書いていないのでお好みで変更してください。

HTML

<div class="slider">
  <div><img src="image1.jpg" alt=""></div>
  <div><img src="image2.jpg" alt=""></div>
  <div><img src="image3.jpg" alt=""></div>
</div>

CSS

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

.autoplay-buttons[data-play="stop"]:before {
  content: '一時停止';
}

JavaScript

$(function() {
  var mySlider = $('.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')
    }
  });
});

DEMO

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping ...