Infinite Slider

Simple way of creating infinite slider.

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div id='viewport'>
    <div id='prev' class='control'><</div>
    <div id='next' class='control'>></div>
    <div id='scroller'>
        <div class='item' style='background-color: red;'>1</div>
        <div class='item' style='background-color: white;'>2</div>
        <div class='item' style='background-color: blue;'>3</div>
        <div class='item' style='background-color: green;'>4</div>
        <div class='item' style='background-color: yellow;'>5</div>
    </div>
</div>

CSS

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

#viewport {
    background: black;
    height: 200px;
    overflow: hidden;
    position: relative;
}
div.control {
    color: black;
    cursor: pointer;
    font-size: 30px;
    line-height: 200px;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 10%;
    z-index: 10;
}
div.control:hover {
    background-color: rgba(0,0,0,0.1);
}
#prev {
    left: 0;
    top: 0;
}
#next {
    right: 0;
    top: 0;
}

div.item {
    float: left;
    font-size: 60px;
    line-height: 200px;
    height: 100%;
    text-align: center;
}

JavaScript

var transitioning = false;
var $viewport = $('#viewport');
var $prev = $('#prev');
var $next = $('#next');
var $scroller = $('#scroller');
var $items = $('div.item');

$items.css('width', $viewport.width() * 0.8);

var leftPos = (($items.width() * 2) - (($viewport.width() - $items.width()) / 2));
$scroller.prepend($('div.item').last()).prepend($('div.item').last()).css({
    'width': $items.width() * $items.length,
    'transform': 'translateX(-' + leftPos + 'px)'
});

$next.on('click', function () {
    if (!transitioning) {
        transitioning = true;
        $scroller.transition({x: '-=' + $items.width()}, 500, 'cubic-bezier(0.645, 0.045, 0.355, 1)', function () {
            $scroller.append($('div.item').first()).transition({x: '+=' + $items.width()}, 0);
            transitioning = false;
        });
    }
});
$prev.on('click', function () {
    if (!transitioning) {
        transitioning = true;
        $scroller.transition({x: '+=' + $items.width()}, 500, 'cubic-bezier(0.645, 0.045, 0.355, 1)', function () {
            $scroller.prepend($('div.item').last()).transition({x: '-=' + $items.width()}, 0);
            transitioning = false;
        });
    }
});