<div class="js-slider 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>
body {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}

.slider {
  width: 80%;
  margin: auto;
}

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

.autoplay-buttons[data-play="stop"] {
  &:before {
    content: 'stop';
  }
}
View Compiled
$(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')
    }
  });
});

External CSS

  1. https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css
  2. https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js
  2. https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js