[jQuery/CSS] Slider with multiple elements

Question

Hi!

I'd like to create a slider like in these image galleries.
It should show multiple entries at a time, as shown in the following image:

http://i.imgur.com/nTBPw.png (@ILMV sorry, I'm not allowed to place it by myself..)

When I click on the right arrow it should slide ("iPhone-like") to the left so that you see 5, 6, 7 and 8.
The entries (imaged by numbers) are created dynamicly.

<div>
    <ul>
        <li>1</li>  <!-- ← visible -->
        <li>2</li>  <!-- ← visible -->
        <li>3</li>  <!-- ← visible -->
        <li>4</li>  <!-- ← visible -->
        <li>5</li>  <!-- ← not visible -->
        <li>6</li>  <!-- ← not visible -->
        <li>7</li>  <!-- ← not visible -->
        <li>8</li>  <!-- ← not visible -->
    </ul>
</div>

I know how a slider works and would be able to create one by myself, but I can't figure how to create that (CSS-)layout..

Thank you in advance

EDIT to make that clear: the order is relevant because I'd like to build a "all of our customers" grid-like view, which are sorted by their titles.

Answer 1

The problem with your question is that you're unclear about whether you need the list elements in a particular order or not. Of course given you're already using jQuery there's no reason why you shouldn't be able to insert them in a manner which would be acceptable to you.

Anyway, I've created something simple with floats. Here's a simple demo: http://jsfiddle.net/vPGbf/

The crux of the whole thing (ignoring the really fancy CSS I've stuck in there) are some really simple floated li, a absolute positioned ol and a outer div with overflow set to hidden to hide the other lis which you don't need yet. That's really it. Remember that the ol's width have to be increased as you add in more elements, and that to do the sliding you should change the left value of the ol.