Question

我有小缩略图，如：

<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张图片，然后点击下一个按钮将第一个元素移到左边，然后滑入第五个元素。

Answer 1

我会依赖jQuery。

此问题已在此处得到解答：https://stackoverflow.com/a/12608357/2813022

这应该提供足够的答案：）

简单缩略图滑块提示

1 个答案: