JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gallery">
    <ul>
        <li>
            <a href="">
                <img src="http://www.webbyfreebies.com/wp-content/uploads/2009/12/icon_c.png"  alt=""  />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://www.jellymuffin.com/icons/funny/images/icon137.gif" alt="" />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://iconpacks.mozdev.org/images/thunderbird-icon.png" alt=""  />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://www.mouserunner.com/images/WindowsIconPreview_128x128.png" alt=""  />
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://www.designswan.com/wp-content/uploads/2009/icon/playground/Playground_icons_001.png" alt=""  />
            </a>
        </li>
    </ul>
</div>
<div id="prevNext">
    <div id="prev" href="" alt="Previous slide" title="Previous slide" >Prev</div>
    <div id="next" href="" alt="Next slide" title="Next slide" >Next</div>
</div>

CSS

#gallery{
    width:250px;
    overflow:auto;
    position:relative;
    overflow-x:auto;
    overflow-y:hidden; 
    border:1px solid #000;
}
#gallery ul{
    width:1000px;
}
#gallery li{
    display:inline;
   position:relative; 
}
#gallery li img{
    top:0;
    left:0;
}
#prevNext{
    position:relative;
    bottom:0;
}
#prev,#next{
    width:47px;
    height:80px;
}
#prev{left:50%;}
#next{
    right:100%;
    background-position:top right;
}

JavaScript

$('#gallery').css({
    'overflow': 'hidden'
});
var index = 0;
var $item = $('#gallery ul li');
var prev = null;
$('#next').live('click', function() {
    prev = $item.eq(index);
    $item.each(function(i){
        $(this).animate({width:'slide',left:'-='+prev.width()});
    });
    index += 1;
});