How to stop Slick Slider autoplay on click and drag

Question

I'm using Ken Wheeler's Slick and want to set autoplay on false when the user either clicks on slick-prev or slick-next or drags the carousel left or right.

slick = $('.slick').slick({
        slidesToShow: 3,
        slidesToScroll: 2,
        autoplay: true,
        autoplaySpeed: 2500,
        dots: false,
      });

I tried the following

$('.slick-prev, .slick-next').on('click', function(){
        slick.slickSetOption('autoplay', false, false);
});

And

$('.slick-prev, .slick-next').on('click', function(){
        $(slider).slick('slickSetOption', 'autoplay', false, false);
    });

Both did not work, and I'm not sure how to look for a draggable event.

Answer 1

Updated

You need to using slickSetOption like below:

HTML

<div class="my-slick">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</div>

JS

var slickOptions = {
        autoplay: true,
        // rest of options
    },
    $slick = $('.my-slick');

$slick.slick(slickOptions);

// built-in feature, for more info check the [doc](http://kenwheeler.github.io/slick/)
$slick.on('swipe', function(event, slick, direction) {
    reinitSlick();
});

$('.slick-prev, .slick-next').on('click', function(){
    reinitSlick();
});

var reinitSlick = function() {    
    $slick.slick('slickSetOption', {
      'autoplay': false
    }, false);
}

Codepen