Left right arrow

HTML

<div>
    <span id="prev">prev</span>
    <div class="scroll-container">
        <div class="img-container">
            <img src="http://dummyimage.com/100x100/000000/fff">
            <img src="http://dummyimage.com/100x100/f33636/fff">
            <img src="http://dummyimage.com/100x100/0c5b9e/fff">
            <img src="http://dummyimage.com/100x100/0c9e0c/fff">
        </div>
    </div>
    <span id="next">next</span>
</div>

CSS

.scroll-container {
    width: 440px;
    height: 100px;
    overflow: hidden;
    display: inline-block;
}

.img-container {
    height: 100px;
    width: 800px;
    position: relative;
}

.scroll-container img {
    float: left;
    list-style-type: none;
    margin: 0 5px;
    position: relative;
}

#prev {
    cursor: pointer;
    float: left;
}
#next {
    cursor: pointer;
    position: absolute;
    float: left;
}

JavaScript

$(function () {
    $('#prev').click(function () {
        if(!$('.img-container').is(':animated')) {
            var first = $('.img-container img:first-child');
            var firstClone = first.clone();
            $('.img-container').append(firstClone);
            $('.img-container').animate({ "top": "-=110px" }, "slow", function() {
                first.remove();
                $('.img-container').css("top", "0");
            });
        }
    });
    $('#next').click(function () {
        if(!$('.img-container').is(':animated')) {
            var last = $('.img-container img:last-child');
            var lastClone = last.clone();
            $('.img-container').css("top", "-110px");
            $('.img-container').prepend(lastClone);
            $('.img-container').animate({ "top": "0" }, "slow", function() {
                last.remove();
            });
        }
    });
});