Simple thumbnail slider tips

Question

I have small thumbnails like:

<ul class="img-nav">
    <li>
        <a href="javascript:;" rel="/media/1760/sverige104-fonster-tra-2luft-putsningsspalt.jpg?width=290">
            <span class="img-wrapper">
                <img src="/media/1760/sverige104-fonster-tra-2luft-putsningsspalt.jpg?height=95&amp;bgcolor=ffffff" alt="Sidohängt utåtgående fönster med putsningsspalt">
            </span>
        </a>
    </li>
    <li>
        <a href="javascript:;" rel="/media/1757/sverige104-fonster-tra-1luft-furu-lasyr-5063.jpg?width=290">
            <span class="img-wrapper">
                <img src="/media/1757/sverige104-fonster-tra-1luft-furu-lasyr-5063.jpg?height=95&amp;bgcolor=ffffff" alt="Sverige104 SHE 1-luft, Tillval: Kvistren furu, lasyr 5063">
            </span>
        </a>
    </li>
    <li>
        <a href="javascript:;" rel="/media/1772/sverige104-fonster-tra-sidohangt-putsningsspalt-2luft-oppet.png?width=290">
            <span class="img-wrapper">
                <img src="/media/1772/sverige104-fonster-tra-sidohangt-putsningsspalt-2luft-oppet.png?height=95&amp;bgcolor=ffffff" alt="Sidohängt utåtgående fönster med putsningsspalt">
            </span>
        </a>
    </li>
    <li>
        <a href="javascript:;" rel="/media/1761/sverige104-fonster-tra-alu-2luft-she-utsida.jpg?width=290">
            <span class="img-wrapper">
                <img src="/media/1761/sverige104-fonster-tra-alu-2luft-she-utsida.jpg?height=95&amp;bgcolor=ffffff" alt="Sverige104 Trä/Alu utåtgående 2-luft sidohängt fönster med spanjolett">
            </span>
        </a>
    </li>
    <li>
        <a href="javascript:;" rel="/media/1756/sverige104-fonster-tra-1luft-she.jpg?width=290">
            <span class="img-wrapper">
                <img src="/media/1756/sverige104-fonster-tra-1luft-she.jpg?height=95&amp;bgcolor=ffffff" alt="Utåtgående sidohängt fönster med fönsterhakar 1-luft">
            </span>
        </a>
    </li>
    <li>
        <a href="javascript:;" rel="/media/1915/sverige104-tra-1-3.jpg?width=290">
            <span class="img-wrapper">
                <img src="/media/1915/sverige104-tra-1-3.jpg?height=95&amp;bgcolor=ffffff" alt="Sverige104 fönster trä Profil A 1.3">
            </span>
        </a>
    </li>
    <li>
        <a href="javascript:;" rel="/media/1788/sverige104-tra-1-2.jpg?width=290">
            <span class="img-wrapper">
                <img src="/media/1788/sverige104-tra-1-2.jpg?height=95&amp;bgcolor=ffffff" alt="Sverige104 fönster trä Profil A 1.2">
            </span>
        </a>
    </li>
    <li>
        <a href="javascript:;" rel="/media/1789/sverige104-tra-1-3-gammeldags.jpg?width=290">
            <span class="img-wrapper">
                <img src="/media/1789/sverige104-tra-1-3-gammeldags.jpg?height=95&amp;bgcolor=ffffff" alt="Sverige104 fönster trä Profil A 1.3 i gammal stil utan dropplist">
            </span>
        </a>
    </li>
    <li>
        <a href="javascript:;" rel="/media/1851/shf-utsida_.jpg?width=290">
            <span class="img-wrapper">
                <img src="/media/1851/shf-utsida_.jpg?height=95&amp;bgcolor=ffffff" alt="Utsida detalj">
            </span>
        </a>
    </li>
    <li>
        <a href="javascript:;" rel="/media/1855/she-insida_.jpg?width=290">
            <span class="img-wrapper">
                <img src="/media/1855/she-insida_.jpg?height=95&amp;bgcolor=ffffff" alt="Insida detalj">
            </span>
        </a>
    </li>
</ul>    

However, right now they are just floated and breaks into multiple rows. I want to list 4 items and then make next and prev buttons to slide between the images. I have only found snippets that include the big image slide aswell, and I thought i'd ask here for suggestions on how to build this myself.

Basicly to summarize it: I want to list 4 images, then click a next button to move the first element to the left and slide the 5th in.