Slick Slider Autoplay

Fiddle demonstrating the autoplay fixes. from https://github.com/simeydotme/slick/tree/autoplay-rewrite

by ian_smithz

HTML

<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<script src="https://rawgit.com/simeydotme/slick/autoplay-rewrite/slick/slick.js"></script>
<!--              ^
    Use the FORK, Luke.
    create your own new fiddle test case.
-->

<section class="slider">
    <div>Hover me and I'll pause</div>
    <div>Unhover and I'll resume</div>
    <div>But not if you've paused me</div>
    <div>I wont restart when changing slides</div>
    <div>I will also pause when focussed</div>
    <div>Huzzah.</div>
</section>

<button class="pause">
  Play/Pause the Slider
</button>
<button class="go">
  Random Slide
</button>
<button class="poh">
  Toggle Pause On Hover
</button>
<button class="pof">
  Toggle Pause On Focus
</button>

SCSS

$c1: #3a8999;
$c2: #e84a69;

.slider {
    width: auto;
    margin: 10px 20px 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-arrow {
    margin: 0;
    z-index: 2;
}

.slick-prev:before, 
.slick-next:before {
    color: black; 
}

.slick-dots {
    bottom: -40px;
}

.slick-slide:nth-child(odd) {
     background: $c2;
}

body {
  padding: 30px;
}
button {
  background: darkGreen;
  cursor: pointer;
  border: none;
  border-radius: 3px;
  color: white;
  padding: 10px 30px;
  margin: 20px 10px;
  display: inline-block;
}
button.paused {
  background: crimson;
  opacity: 0.8;
}

JavaScript

/**

    Autoplay Enabled.
		Pause on Hover: True;
    Pause on Dots: False;
    Pause on Focus: True;

		Autoplay should now correctly pause/resume when
    mouseenter / mouseleave.
    
    Mouse / focus events should
    not affect the pause state of slider.

**/

var xpaused = false;
var previous = 0;
var poh = true;
var pof = true;

$(".pause").on("click", function() {
	if( xpaused ) {
  	$(".slider").slick("play");
  } else {
  	$(".slider").slick("pause");
  }
  xpaused = !xpaused;
  $(this).toggleClass( "paused" );
});


$(".go").on("click", function() {
	var r = Math.floor( Math.random() * 6 );
  if ( r === previous ) { r = r + 1; }
 	$(".slider").slick("goTo", r );
  previous = r;
});

$(".poh").on("click", function() {
 	$(".slider").slick("setOption", "pauseOnHover", !poh, true );
  poh = !poh;
  $(this).toggleClass( "paused" );
});

$(".pof").on("click", function() {
 	$(".slider").slick("setOption", "pauseOnFocus", !pof, true );
  pof = !pof;
  $(this).toggleClass( "paused" );
});

$(".slider").slick({
    autoplay: true,
    autoplaySpeed: 5000,
    pauseOnHover: true,
    pauseOnFocus: true,
    dots: true,
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: false,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
        } 
    }]
});