Simpler Horizontal Slider

Slide items horizontally, responsively

HTML

<div class="hslide">
    <div class="hslide-item">One</div>
    <div class="hslide-item">Two</div>
    <div class="hslide-item">Three</div>
    <div class="hslide-item">Four</div>
    <div class="hslide-item">Five</div>
    <div class="hslide-item">Six</div>
    <div class="hslide-item">Seven</div>
</div>
<a href="#" class="hslide-prev">Previous</a>
<a href="#" class="hslide-next">Next</a>

CSS

body {
    font-family:sans-serif;
}

.hslide {
    height:100px;
    width:100%;
    background:#eee;
    font-size:0;
    position:relative;
    overflow:hidden;
}

.hslide-stage {
    position:absolute;
    white-space:nowrap;
}

.hslide-item {
    display:inline-block;
    background:#ccc;
    box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
    width:100px;
    height:100px;
    font-size:12px;
    text-align:center;
}

.hslide-prev, .hslide-next {
    display:inline-block;
    background:#eee;
    color:#000;
    text-decoration:none;
    padding:10px;
    margin:5px 0;
}
.hslide-prev:hover, .hslide-next:hover {
    background:#ccc;
}
.hslide-prev-disabled, .hslide-next-disabled {
    display:inline-block;
    background:#eee;
    color:#ccc;
    text-decoration:none;
    padding:10px;
    margin:5px 0;
}

JavaScript

// Add markup

$('.hslide').wrapInner('<div class="hslide-stage" />');


// Calculate Conditions & Set Vars

    var playTimer = 3000,
     slideQty = $('.hslide-item').length,
     slideWidth = $('.hslide-item').width(),
     stageWidth = $('.hslide-stage').width(),
     contWidth = $('.hslide').width();

    if ((slideQty*slideWidth) < contWidth) {
    $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev');
    $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next');
    }
    else {
    $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled');
    $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled');
    }

$(window).resize(function() {
    var slideQty = $('.hslide-item').length,
     slideWidth = $('.hslide-item').width(),
     stageWidth = $('.hslide-stage').width(),
     contWidth = $('.hslide').width();
    if ((slideQty*slideWidth) < contWidth) {
    $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev');
    $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next');
    }
    else {
    $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled');
    $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled');
    }
});

$('.hslide-next').live('click', function(event) {
     event.preventDefault();
    $('.hslide-stage').animate({left: -(slideWidth)}, 500, function() {
        $('.hslide-item:first').appendTo('.hslide-stage');
        $('.hslide-stage').css({left: '0px'});
  });
});

$('.hslide-prev').live('click', function(event) {
     event.preventDefault();
    $('.hslide-item:last').prependTo('.hslide-stage');
    $('.hslide-stage').css({left: -(slideWidth)});
    $('.hslide-stage').animate({left: '0px'}, 500, function() {
    });
});
function moveForward() {
$('.hslide-stage').animate({left: -(slideWidth)}, 500, function() {
       ...