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">
<!--              ^
           [ Fork, Please ] 
-->

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
</section>

CSS

.slick-slide {
    background: skyblue;
    color: white;
    padding: 30px;
    font-size: 30px;
    font-family: "Arial";

}

.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

/**
   init event not being triggered
**/

function algo(message) {alert(message)}
algo('works')

$(".slider").on('init', function(){algo("doesn't")});
$(".slider").slick();

/* Alternative cases */

// $(".slider").slick().on('init', function(){algo("doesn't")});
// slide = $(".slider").slick();
// slide.on('init', function(){algo("doesn't")});*/