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 class="singleItem">
            <p>Item 6</p>
            <img src="http://www.helptionary.com/wp-content/uploads/2010/06/greener-grass.jpg" width="100" />
        </div>
        <div class="singleItem">
            <p>Item 7</p>
            <img src="http://www.helptionary.com/wp-content/uploads/2010/06/greener-grass.jpg" width="100" />
        </div>
        <div class="singleItem">
            <p>Item 8</p>
            <img src="http://www.helptionary.com/wp-content/uploads/2010/06/greener-grass.jpg" width="100" />
        </div>
        <div class="singleItem">
            <p>Item 9</p>
            <img src="http://www.helptionary.com/wp-content/uploads/2010/06/greener-grass.jpg" width="100" />
        </div>
        <div class="singleItem">
            <p>Item 10</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" /><<</a>
<a href="#" class="next browse" />>></a>

CSS

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

JavaScript

var speed = 500; // transition speed
var skip = 1; // number of items to shift each time 
var itemsToDisplay = 1; // items to fit in the slider

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

$('#sliderWrapper').width( itemsToDisplay * singleItemWidth )
$('#sliderContainer').width( containerWidth );
$('.browse').bind('click', function() {
    var cssLeft = parseInt($('#sliderContainer').css('left'));
    var slideMove = singleItemWidth * skip;

        if( $(this).hasClass('next') ) {
            if( cssLeft <= -limitWidth ) {
                var newLimit = cssLeft + limitWidth;
                limitWidth = limitWidth - newLimit;
                slideMove = -limitWidth;
            }
            if( cssLeft >= -limitWidth ) {
                $('#sliderContainer').animate({ left : '-=' + slideMove  }, { duration : 500 }, function() {
                })
            }
        }
        if( $(this).hasClass('prev') &&  cssLeft <= 0) {
            if ( cssLeft == 0 ) {
                slideMove = -limitWidth;
            };
            if ( cssLeft <= 0 ) {
                $('#sliderContainer').animate({ left : '+=' + slideMove }, { duration : 500 }, function() {
                })
            }
    }
    return false;
});