Horizontal Content Slider

HTML

<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content4"></div>
<div id="nav-controls">
    <div id="scroll-left">&lt;</div>
    <div id="scroll-right">&gt;</div>
</div>

CSS

body {
    overflow:hidden;
    white-space:nowrap;
    width:100%;
}
#content1 {
    display:inline-block;
    background-color:#f00;
    width:500px;
    height:200px;
}
#content2 {
    display:inline-block;
    background-color:#ff0;
    width:620px;
    height:200px;
}
#content3 {
    display:inline-block;
    background-color:#f0f;
    width:300px;
    height:200px;
}
#content4 {
    display:inline-block;
    background-color:#f5a;
    width:600px;
    height:200px;
}
#nav-controls {
    position:fixed;
    width:100%;
    text-align:center;
}
#scroll-left, #scroll-right {
    display:inline-block;
    font-size:1em;
    background-color:#c0c0c0;
    color:#585858;
    padding:1em 1em;
    width:0.25em height:0.25em;
    border-radius:0.63em;
}
#scroll-left:hover, #scroll-right:hover {
    background-color: #585858;
    color:#fff;
    cursor:pointer;
}
#scroll-left {
    margin-right:5em;
}
#scroll-right {
    margin-left:5em;
}

JavaScript

var scrollTimer;
var $document = $(document);
var scrollOffset = 20;
var maxScrollOffsetLeft = $document.width() - $("body").innerWidth();

function scrollContent(scrollDir) {
    var scrollArgs = {
        scrollLeft: ($document.scrollLeft() + (scrollOffset * scrollDir))
    };
    $("html").animate(scrollArgs, 1);
};

function scrollLeft() {
    if ($document.scrollLeft() > 0) {
        scrollContent(-10);
    }
};

function scrollRight() {
    if ($document.scrollLeft() < maxScrollOffsetLeft) {
        scrollContent(1);
    }
};

function scrollStop() {
    clearInterval(scrollTimer);
};

$("#scroll-left").on("mousedown", function () {
    scrollTimer = setInterval(scrollLeft, 60);
}).on("mouseup", scrollStop);
$("#scroll-right").on("mousedown", function () {
    scrollTimer = setInterval(scrollRight, 60);
}).on("mouseup", scrollStop);