今回はよく使う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>

css

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

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

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')
    }
  });
});

サンプル