jQuery back and forth hiding

Question

HTML Code

<div id="sub-up"></div>

<div id="subnavigation">
    <div class="sub-item" data-count="1">
        <a href="#">bla</a>
    </div>                  
    <div class="sub-item" data-count="2">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="3">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="4">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="5">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="6">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="7">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="8">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="9">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="10">
        <a href="#">bla</a>
    </div>
</div>

<div id="sub-down"></div>

How can I manage it, that, if you load the page, you can see the div's with the data-count 1 to 5? When you click on the sub-down div you can see the div's with the data-count 2 to 6, after another click on the sub-down you can see 3 to 7?

When you click on the sub-up div, you can see data-count 2 to 6 and so on...

I don't know how to remember the position of the 5 shown div's and how to tell jQuery that it has to switch to the highest number, if you want to click lower than data-count 1. Like a carrousel effect.

So all I try to accomplish is something like a carrousel with 5 shown div tag's which are moving per click on sub-down and sub-up .

If you want to read the jQuery Code I coded so far, just tell me. Oh another thing, the div list is dynamic .

SOLUTION (thx to sdespont)

var page = 0;
var pageMax = $('.sub-item').length - 5;

$('#subnavigation div.sub-item').hide().slice(page, page + 5).fadeIn(10);

$('#sub-down').click(function () {
    page = (page < pageMax) ? page+1 : pageMax;
    var tmp = page * 1;
    $('#subnavigation div.sub-item').fadeOut(10).promise().done(function () {
        $('#subnavigation div.sub-item').slice(tmp, tmp + 5).fadeIn(10)
    });
});

$('#sub-up').click(function () {
    page = (page > 0) ? page-1 : 0;
    var tmp = page * 1;
    $('#subnavigation div.sub-item').fadeOut(10).promise().done(function () {
        $('#subnavigation div.sub-item').slice(tmp, tmp + 5).fadeIn(10);
    });
});

EDIT

Another solution can be found in his/her updated answer. Thank you very much!

Answer 1

You can do something like this : http://jsfiddle.net/UQTY2/258/

Play with nbElem to chose the number of elements you want to display

var $elem = $('#subnavigation div.sub-item');

var page = 0;
var nbElem = 1;
var pageMax = $elem.length / nbElem;
var fadeSpeed = 100;

//Display the first batch of elements
$('#subnavigation div.sub-item').hide().slice(page, page + nbElem).fadeIn(fadeSpeed);

//Next batch of elements
$('#sub-down').click(function () {
    page = (page < pageMax) ? page + 1 : pageMax;
    var tmp = page * nbElem;
    $elem.fadeOut(fadeSpeed).promise().done(function () {
        $elem.slice(tmp, tmp + nbElem).fadeIn(fadeSpeed);
    });
});

//Previous batch of elements
$('#sub-up').click(function () {
    page = (page > 0) ? page - 1 : 0;
    var tmp = page * nbElem;
    $elem.fadeOut(fadeSpeed).promise().done(function () {
        $elem.slice(tmp, tmp + nbElem).fadeIn(fadeSpeed);
    });
});

Answer 2

sdespont's suggestion should work, but have you considered using CSS to show/hide rather than adding and removing your DOM elements?

you could do this with css and nth-child.

div.sub-item:nth-child(n+5){
    display: none;
}

The result is less javascript, and simpler overall code. here's a jsfiddle example.

http://jsfiddle.net/RC4mt/2/