Show a set number of <li>s and then hide them to reveal another set number of <li>s
<p>I am trying to create a carousel, using floated list items.</p>

<p>When <em>Next</em> is pressed the current 4 visible <code>li</code>s are hidden and the next 4 shown for as many times as needed. Though, there may not always be another 4 to show, as in the case below there would only be 2 more to display.</p>

<p>When <em>Prev</em> is pressed the current 4 visible <code>li</code>s are hidden and the previous 4 shown.</p>

<p>It doesn't need to loop i.e. if <em>Next</em> is pressed enough times it will reach the end, it wont just start back from the beginning again.</p>

<p><a href="http://jsfiddle.net/tw16/5NB6G/" rel="nofollow">http://jsfiddle.net/tw16/5NB6G/</a></p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div id="left"&gt;Prev&lt;/div&gt;
&lt;ul&gt;
    &lt;li&gt;Test 1&lt;/li&gt;
    &lt;li&gt;Test 2&lt;/li&gt;
    &lt;li&gt;Test 3&lt;/li&gt;
    &lt;li&gt;Test 4&lt;/li&gt;
    &lt;li&gt;Test 5&lt;/li&gt;
    &lt;li&gt;Test 6&lt;/li&gt;
&lt;/ul&gt;
&lt;div id="right"&gt;Next&lt;/div&gt;
</code></pre>

<p><strong>jQuery/JavaScript:</strong></p>

<pre><code>var listLength = $('ul li').length;
var listCounter = 0;

$("#right").click(function() {
    if (listCounter == listLength - 1) {
        $("ul li").show(400);
        listCounter = 0;
    }
    else {
        $('ul li').eq(listCounter).hide(400);
        listCounter++;
    }
});
</code></pre>

<p>Unfortunately, I haven't been able to adapt the code to the requirements above.</p>
