Jquery 简单的缩略图滑块提示

我有一些小的缩略图，比如：

<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>    

但是，现在它们只是浮动并分成多行。我想列出4个项目，然后使下一个和上一个按钮之间的图像滑动。我只找到了一些包含大图幻灯片的片段，我想在这里征求一下关于如何自己构建这个的建议

基本上可以概括为： 我想列出4幅图像，然后单击“下一步”按钮将第一个元素向左移动，并将第五个元素滑入