JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel" class="carousel">
    <ul class="slide-container" data-bind="foreach: slides">
        <li class="slide" data-bind="attr: { 'original-index': $index} , style: { background: 'url(' + imageUrl + ') no-repeat' }" />
    </ul>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
}
#carousel {
    overflow: hidden;
    position: relative;
}
#carousel .slide-container {
    position: relative;
}
#carousel .slide-container:after {
    content:"";
    display: table;
    clear: both;
}
#carousel .slide-container.transition {
    -webkit-transition: margin-left 1s;
    -moz-transition: margin-left 1s;
    -o-transition: margin-left 1s;
    transition: margin-left 1s;
}
#carousel .slide-container .slide {
    float: left;
}

JavaScript

function CarouselViewModel(carousel, slides, slideshowInterval) {

    // Setup
    var self = this;
    self.carousel = carousel;
    self.slides = ko.observableArray(slides);
    self.currentIndex = ko.observable(0);
    self.slideshow = ko.observable({
        timer: null,
        active: false,
        interval: 0
    });
    self.busy = false;

    if (slideshowInterval !== undefined && slideshowInterval > 0) {
        self.slideshow().interval = slideshowInterval;
    }

    // Preload the first image and use its dimensions to set the size of the carousel
    var preLoadImage = new Image();

    preLoadImage.onload = function () {
        $(self.carousel).width(this.width);
        $(self.carousel).height(this.height);
        $(self.carousel).find('.slide-container').width(this.width * self.slides().length);
        $(self.carousel).find('.slide-container').height(this.height);
        $(self.carousel).find('.slide-container .slide').width(this.width);
        $(self.carousel).find('.slide-container .slide').height(this.height);
    };

    preLoadImage.src = self.slides()[0].imageUrl;

    // Slideshow Functions
    self.startSlideshow = function () {
        self.slideshow().timer = setInterval(function () {
            self.setIndex(self.currentIndex() + 1);
        }, self.slideshow().interval);
        self.slideshow().active = true;
    };

    self.stopSlideshow = function () {
        clearInterval(self.slideshow().timer);
        self.slideshow().active = false;
    };

    self.toggleSlideshow = function () {
        if (self.slideshow().active) {
            self.stopSlideshow();
        } else {
            self.startSlideshow();
        }
    };

    // Transition end callback
    $('.slide-container').bind('transitionend oTransitionEnd webkitTransitionEnd', function () {
        $(this).removeClass('transition');
        if (parseInt($(this).css('margin-left'), 10) != '0') {
            var first = $('.slide-container .slide')[0];
           ...