sliding/sets/paged navigation

by ashleycam3ron

HTML

<div id="newsies">
    <div id="storage">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
<div id="news_buttons">
    <a href="#" class="arrowL">&lt;</a>
    <ul>
        <li class="n1"><a href="#">1</a></li>
        <li class="n2"><a href="#">2</a></li>
        <li class="n3"><a href="#">3</a></li>
        <li class="n4"><a href="#">4</a></li>
        <li class="n5"><a href="#">5</a></li>
        <li class="n6"><a href="#">6</a></li>
    </ul>
    <a href="#" class="arrowR">&gt;</a>
</div>

CSS

#newsies{
    height:202px; /*viewport height*/
    width:302px; /*viewport width*/
    overflow:hidden;
}
#storage{
    height:202px; /*viewport height*/
    width:9999px;
    position:relative;
}
#storage div{
    height:200px; /*slide height*/
    width:300px; /*slide width*/
    border:black solid 1px; /*remove*/
    float:left;
    position:absolute;
    display:none;
}
#storage div:nth-child(1){
    display:block;
}
#news_buttons{
    width:35px; /*NAV viewport width*/
    overflow:hidden;
}
#news_buttons ul{
    width:9999px;
}
#news_buttons li{
    list-style-type:none;
    display:inline;
}
.arrowL, .arrowR{
    cursor:pointer;
}

JavaScript

$('#news_buttons ul li a').click(function() {
    var num = $(this).html();
    $('#storage div').fadeOut();
    $('#storage :nth-child(' + num + ')').fadeIn();
});

var navpages = $('#storage div').size() / 3 - 1;
var width = $('#news_buttons').css('width');
var max = '-' + width.replace('px','') * navpages + 'px';

$('.arrowL').click(function() {
    if ($('#news_buttons ul').css('marginLeft') != '0px') {
        $('#news_buttons ul').animate({
            marginLeft: "+="+width
        }, 500);
    }
});
$('.arrowR').click(function() {
    if ($('#news_buttons ul').css('marginLeft') != max) {
        $('#news_buttons ul').animate({
            marginLeft: "-="+width
        }, 500);
    }
});