Slick Slider Autoplay

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

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" id="slider1">
    <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>

<section class="slider" id="slider2">
    <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="pause2">
  Play/Pause the Slider
</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;


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

var xpaused2 = false;


$(".pause2").on("click", function() {
	if( xpaused2 ) {
  	$("#slider2").slick("play");
  } else {
  	$("#slider2").slick("pause");
  }
  xpaused2 = !xpaused2;
  $(this).toggleClass( "paused" );
});


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

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