JSFiddle - React, Tailwind, and code Playground

by anatomic

HTML

<div class="gallery">
    <ul class="cf">
        <li><img src="http://img864.imageshack.us/img864/7223/benefitpromo.jpg"></li>
        <li><img src="http://placekitten.com/g/520/230/"></li>
        <li><img src="http://img864.imageshack.us/img864/7223/benefitpromo.jpg"></li>
    </ul>
</div>

CSS

.gallery {
    width: 520px;
    height: 230px;
    overflow: hidden;
}

.gallery ul {
    list-style: none;
    margin: 0;
}

.gallery li {
    float:left;
    width:520px;
    height:230px;
    margin: 0 !important;
}

.gallery li img{
    vertical-align: bottom;
}

JavaScript

var Gallery = function() {
    var $gallery, pauseDuration = 3000,
        animationDuration = 800;

    this.init = function() {
        //assuming jQuery for this
        $gallery = $('.gallery ul');
        var totalWidth = $('.gallery li').length * 520;

        $gallery.css('width', totalWidth + 'px');

        setTimeout(update, pauseDuration);
    };

    var update = function() {
        $gallery.animate({
            'margin-left': '-520px'
        }, animationDuration, function() {
            var slide = $('.gallery li').eq(0).detach();
            $gallery.css('margin-left', '0');
            $gallery.append(slide);
            setTimeout(update, pauseDuration);
        });
    };
};

var gallery = new Gallery();
gallery.init();