knockout item carousel

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<ul data-bind="foreach: {data: items, beforeRemove:hideItem, afterAdd:showItem}">
    <li data-bind="fadeVisible:$index() >= $root.minIndex() && $index() <= $root.maxIndex()"> <span data-bind="text:$data"></span>

    </li>
</ul>
Min<span data-bind="text:minItemIndex"></span> Max<span data-bind="text:maxItemIndex"></span> 
<button data-bind="click:moveRight">Right</button>
<button data-bind="click:moveLeft">Left</button>

CSS

li{
    display:inline
}

JavaScript

function viewModel() {
    var self = this;
    self.moveRight = function () {
       var lastItem = self.items.pop();
        self.items.unshift(lastItem);
    };
    self.moveLeft = function () {
        var firstItem = self.items.shift();
        self.items.push(firstItem);
    };
    self.minIndex = ko.observable(0);
    self.maxIndex = ko.observable(0);
    self.items = ko.observableArray([
        "1",
        "2",
        "3",
        "4",
        "5",
        "6"]);
    self.minItemIndex = ko.observable(0);
    self.maxItemIndex = ko.observable(self.items().length);
    self.showItem = function (elem) {
        if (elem.nodeType === 1) $(elem).hide().slideDown()
    }
    self.hideItem = function (elem) {
        if (elem.nodeType === 1) $(elem).slideUp(function () {
            $(elem).remove();
        })
    }

}
ko.bindingHandlers.fadeVisible = {
    init: function (element, valueAccessor) {
        // Initially set the element to be instantly visible/hidden depending on the value
        var value = valueAccessor();
        $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
    },
    update: function (element, valueAccessor) {
        // Whenever the value subsequently changes, slowly fade the element in or out
        var value = valueAccessor();
        ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
    }
};

$(function () {
    vm = new viewModel();
    ko.applyBindings(vm);
});