JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<div id="sliderWrapper">
    <div id="sliderContainer">
        <div class="singleItem">
            <p>Item 1</p>
            <img src="http://www.helptionary.com/wp-content/uploads/2010/06/greener-grass.jpg" width="100" />
        </div>
        <div class="singleItem">
            <p>Item 2</p>
            <img src="http://www.kidneycancerinfo.org.uk/wp-content/uploads/2011/06/Grass.jpg" width="100" />
        </div>
        <div class="singleItem">
            <p>Item 3</p>
            <img src="http://www.helptionary.com/wp-content/uploads/2010/06/greener-grass.jpg" width="100" />
        </div>
        <div class="singleItem">
            <p>Item 4</p>
            <img src="http://www.kidneycancerinfo.org.uk/wp-content/uploads/2011/06/Grass.jpg" width="100" />
        </div>
        <div class="singleItem">
            <p>Item 5</p>
            <img src="http://www.helptionary.com/wp-content/uploads/2010/06/greener-grass.jpg" width="100" />
        </div>
    </div>
</div>
<a href="#" class="prev browse" />Previous</a>
<a href="#" class="next browse" />Next</a>

CSS

#sliderWrapper { position: relative; width: 300px; height: 100px; overflow: hidden }
#sliderContainer { position: absolute; top: 0; left: 0; overflow: auto }
.singleItem { float: left }

JavaScript

var singleItemWidth = $('.singleItem').outerWidth(true);
var singleItemCount = $('.singleItem').length;
var containerWidth = singleItemWidth * singleItemCount;

$('#sliderContainer').width( containerWidth );

var nextItem = $('a.next');
var prevItem = $('a.prev');

$('.prev').bind('click', function() {
    $('#sliderContainer').animate({ left: '-=' + singleItemWidth }, { queue:false, duration:200, complete: function() {
        $('#sliderContainer .singleItem:last').after($('#sliderContainer .singleItem:first'));
        $('#sliderContainer').css({ left: -singleItemWidth });
    }
    });
    return false;
});

$('.next').bind('click', function() {
    $('#sliderContainer').animate({ left: '+=' + singleItemWidth }, { queue:false, duration:200, complete: function() {
        $('#sliderContainer .singleItem:last').before($('#sliderContainer .singleItem:first'));
        $('#sliderContainer').css({ left: -singleItemWidth });
    }
    });
    return false;
});