Slick Slider Play / Pause

================== html ================

<div class="image-slider">
  <div class="inner">
    <div class="slider-outer">
      <div class="sider-wrap">
        {% for item in module.slider_items %}
        <div class="item">
          <div class="img-wrap">
            {% if item.image_field.src %}
            {% set loadingAttr = item.image_field.loading != 'disabled' ? 'loading="{{ item.image_field.loading }}"' : '' %}
            <img src="{{ item.image_field.src }}" alt="{{ item.image_field.alt }}" {{ loadingAttr }} />
            {% endif %}
            <span class="jetpack-slideshow-line-height-hack">&nbsp;</span>
            <div class="jetpack-slideshow-slide-caption" itemprop="caption description"></div>
          </div>
        </div>
        {% endfor %}
      </div>
      <div class="jetpack-slideshow-controls">
        <a href="#" class="prev slick-prev" aria-label="Previous Slide" role="button"></a>
        <a href="javascript:void(0)" class="button-stop" aria-label="Pause Slideshow" role="button">pause</a>
        <a href="javascript:void(0)" class="next slick-next" aria-label="Next Slide" role="button"></a>
      </div>
    </div>
  </div>
</div>

================================== JS ================

$(document).ready(function(){

  $('.image-slider .sider-wrap').slick({
    dots: false,
    arrows: true,
    infinite: true,
    autoplay: true,
    autoplaySpeed:2000,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    prevArrow: $('.prev'),
    nextArrow: $('.next'),
    fade: true,
    cssEase: 'linear',
    pauseOnHover:false
  });

  $('.button-stop').click( function() {
    if ($(this).html() == 'pause'){
      $('.image-slider .sider-wrap').slick('slickPause')
      $(this).html('play') 
    } else {
      $('.image-slider .sider-wrap').slick('slickPlay')  
      $(this).html('pause') 
    }  
  });


  $('.button-stop').click(function() {
    $(this).toggleClass('pause');
  })
})