Slick Slider Contribution

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

HTML

<script src="http://cdn.jsdelivr.net/jquery.slick/latest/slick.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/latest/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/latest/slick-theme.css">
<section class="slider">
    <div>fast</div>
    <div>fast2</div>
    <div>fast3</div>
    <div>slow</div>
    <div>slow2</div>
    <div>slow3</div>
</section>

CSS

.slider {

    width: 80%;
    margin: 40px 0 0 10%;

}

.slick-slide {

    background: skyblue;
    color: white;
    padding: 30px;
    font-size: 30px;
    font-family: "Arial";

}

.slick-prev:before, 
.slick-next:before {

    color: black;

}

.slick-slide:nth-child(1),
.slick-slide:nth-child(3),
.slick-slide:nth-child(5),
.slick-slide:nth-child(7),
.slick-slide:nth-child(9),
.slick-slide:nth-child(11) {
     background: teal;
}

JavaScript

var $s = $(".slider");

$s.slick({ 
    
    autoplay: true, 
    autoplaySpeed: 100
    
})
.on("afterChange", function(e, slick) {
    
    if( slick.currentSlide > 2 ) {
        $s.slick("setOption", "autoplaySpeed", 1400);
    } else { 
        $s.slick("setOption", "autoplaySpeed", 100);
    }
    
});