Slick Gallery KO Binding

by Jorge Bustos Pereda

HTML

<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.css">
<script src="https://cdn.jsdelivr.net/knockout/3.3.0/knockout.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick-theme.css">
<div id="gallery" 
     style="width:400px"
     data-bind="slick: images, 
                slickOptions: {dots:true, initialSlide:4},
                slickIndex: imageIndex">
</div>
<ul data-bind="foreach: images">
    <li data-bind="text:$data"></li>
</ul>
Img index:
<input type=text data-bind="value: imageIndex"/>

JavaScript

var imageUrls = [];
var i = 1;
for (i=1;i<=10;i++)
    imageUrls.push('http://lorempixel.com/400/200/animals/'+i);

ko.bindingHandlers.slick = (function() {
    var createImageDiv = function(imgUrl) {
        $div = $('<div>');
        $image = $('<img>');
        $image.attr('src',imgUrl);
        $div.append($image);
        return $div;
    };
    
    // Initializes the carousel
    var init = function(element, valueAccessor, allBindingsAccessor) {
        // Clears the div
        $(element).empty();
        // Creates the inner divs with images
        var images = ko.unwrap(valueAccessor());
        if (images) {
        	images.forEach(function(imgUrl) {
                $(element).append(createImageDiv(imgUrl));
            });
        }

        // try to recover slickOptions
        var options = allBindingsAccessor().slickOptions || {};

        // Initialize slick on the div, with provided options
        $(element).slick(options);

        //handle disposal, if KO removes the element
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).slick('unslick');
        });
        
        // check if there is slickIndex
        var slickIndex = allBindingsAccessor().slickIndex;
        if (slickIndex) {
            $(element).slick('slickGoTo', ko.unwrap(slickIndex));
        }
        // If it's obervable, subscribe to its changes
		if (ko.isObservable(slickIndex)) {
            slickIndex.subscribe(function(idx) {
                 $(element).slick('slickGoTo', idx);
            });
        }
        // It if's writable observable, update when slick current index changes
        if (ko.isWritableObservable(slickIndex)) {
            $(element).on('afterChange', function(evt, slick, pos) {
                slickIndex(pos);
            })
        }
        
        // Check if the array of images is an observable array
        var imagesArray = valueAccessor();
        // If it's observable array, subscribe to...