簡單的縮略圖滑塊提示

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個項目，然後使下一個和上一個按鈕在圖像之間滑動。我只發現了包含大圖片幻燈片的片段，並且我想我會在這裏詢問如何自己構建這些內容的建議。

Basicly來概括它： 我想列出4張圖片，然後點擊下一步按鈕的第一個元素向左移動和滑動第五

Answer 1

我將依靠jQuery的這個。

這個問題已經在這裏找到答案：https://stackoverflow.com/a/12608357/2813022

這應該提供足夠的答案:)