JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="scene">
    <li>
        <img src="http://tequilla.me/assets/image/slider/slider_discovery.jpg" />
    </li>
    <li class="active">
        <img src="http://tequilla.me/assets/image/slider/slider_maserati.jpg" />
    </li>
    <li>
        <img src="http://tequilla.me/assets/image/slider/slider_googlenow.jpg" />
    </li>
</ul>	<a href="#" id="trigger" style="margin-left: 47%">Trigger</a>

CSS

* {
    padding: 0;
    margin: 0;
}
html, body {
    position: relative;
    width: 100%;
    height: 100%;
}
body {
    min-height: 100%;
}
#scene {
    position: relative;
    overflow: hidden;
    width: 900px;
    height: 500px;
    margin: auto;
}
#scene li {
    position: absolute;
    list-style-type: none;
    float: left;
    display: inline-block;
    width: 0;
    height: 100%;
    top: 0;
}
#scene li.active {
    z-index: 2;
}

JavaScript

$(function () {

    var container = $("#scene"),
        i = 0,
        count = container.find("li").length,
        j = container.find("li").length - 1,
        isAnimating = false;

    container.find("li:first").css({
        "width": "100%"
    });

    $("#trigger").click(function (e) {
        e.preventDefault(e);

        i++;
        if (i >= count) {
            i = 0;
        }
        j++;
        if (j >= count) {
            j = 0;
        }

        container.find("li")
            .finish()
            .removeClass('active')
            .eq(2)
            .width(0)
            .addClass("active")
            .animate({
            "width": "100%"
        }, 400,

        function () {
            container.find("li").first().appendTo(container);
        });

    });
});