Full Width Centered Carousel

HTML

<div class="centered">Content to line up with</div>

<div class="carousel">
    <div class="stage">
    <div class="splash">
        <div class="caption">
            Hey there man this is a caption that does stuff and things, ok?
        </div>
    </div>
        <div class="slide">
        <div class="caption">
            Hey there man this is a caption that does stuff and things, ok?
        </div>
    </div>
        <div class="slide">
        <div class="caption">
            Hey there man this is a caption that does stuff and things, ok?
        </div>
    </div>
        <div class="splash">
        <div class="caption">
            Hey there man this is a caption that does stuff and things, ok?
        </div>
    </div>
    <div class="splash">
        <div class="caption">
            Hey there man this is a caption that does stuff and things, ok?
        </div>
    </div>
        
    </div>
</div>

<div class="centered">
    <a href="#" class="splash-next">Next</a>
    <a href="#" class="splash-prev">Previous</a>
</div>

CSS

.centered {
    max-width:300px;
    background:black;
    color:#fff;
    margin:0 auto;
}
.centered a:link,
.centered a:visited {
    color:#fff;
}
.splash-middle {
    background:blue!important;
}

.caption {
    position: absolute;
    bottom: 0;
    display: block;
    background: rgba(0,0,0,.5);
    color: #fff;
    width: 100%;
    white-space: normal;
}
.carousel {
    white-space:nowrap;
    overflow:hidden;
    width:100%;
    font-size:0;
    text-align:center;
    position:relative;
}

.stage {
    position:absolute;
    left:50%;
}

.splash {
    width:300px;
    height:200px;
    background:#ccc;
    text-align:center;
    box-shadow:inset 0px 0px 1px #000;
    display:inline-block;
    font-size:20px;
    -webkit-transition:background .5s ease-out;
    -moz-transition:background .5s ease-out;
    transition:background .5s ease-out;
    position:relative;
    vertical-align:top;
}

@media only screen and (max-device-width: 300px) {
    .caption {
        display:none;
    }
}

JavaScript

// Set vars
var playTimer = 4000,
    imgHeight = $('.splash').height(),
    imgWidth = $('.splash').width(),
    imgCount = $('.splash').length,
    halfCount = Math.ceil(imgCount/2),
    halfStage = -((imgWidth * imgCount)/2),
    halfStageodd = (halfStage + (imgWidth / 2));

// Set height
$('.carousel').css('height', imgHeight);
// Set middle class
$('.splash:nth-child('+ halfCount +')').addClass('splash-middle');

// Check if even or odd, then center stage
if ($('.splash').length % 2 != 0) {
    $('.stage').css('marginLeft', halfStage);
    }
else {
    $('.stage').css('marginLeft', halfStageodd);
}

// Play function
function moveForward() {    
    // Apply class to the center div for styling
    $('.middle').removeClass('splash-middle');
    $('.splash:first').animate({
    width: '0px'
  }, 2000, function() {
      $('.splash:first').appendTo('.stage').css('width',imgWidth);      
      $('.splash:nth-child('+ halfCount +')').addClass('splash-middle');
  });   
}

// Loop play function
var timer = setInterval(moveForward,playTimer);

// Pause when hovering on buttons
$('.splash-next, .splash-prev').hover(function(ev){
    clearInterval(timer);
}, function(ev){
    timer = setInterval( moveForward, playTimer);
});

// Next 
$('.splash-next').live('click', function() {
    $(this).removeClass('splash-next').addClass('splash-next-disabled');
    $('.splash-middle').removeClass('splash-middle');
    $('.splash:first').animate({
    width: '0px'
    }, 500, function() {    
        $('.splash:first').appendTo('.stage');
        $('.splash:last').css('width',imgWidth);        
        $('.splash:nth-child('+ halfCount +')').addClass('splash-middle');
        $('.splash-next-disabled').removeClass().addClass('splash-next');
    });
});

// Prev
$('.splash-prev').live('click', function() {
    $(this).removeClass('splash-prev').addClass('splash-prev-disabled');
    $('.splash-middle').removeClass('splash-middle');
   ...