旋轉木馬滑塊

Question

我正在嘗試創建一個旋轉木馬滑塊。就像這樣：

<section> 
    <div><br> 
     <div class="arrows"> 
      <div class="seta-x"> 
       <a href="#" class="arrow-left"></a> 
       <a href="#" class="arrow-right"></a> 
      </div> 
     </div> 
     <ul> 
      <li class="opaco"> 
       <div class="caption ">eras dfasd</div> 
       <img src="fotos/passo01.jpg"/> 
      </li> 
      <li> 
       <div class="caption">eras dfasd</div> 
       <img src="fotos/passo01.jpg"/> 
      </li> 
      <li class="opaco"> 
       <div class="caption ">eras dfasd</div> 
       <img src="{{ STATIC_URL }}fotos/passo01.jpg"/> 
      </li> 
      <div class="clear"></div> 
      <br><br> 
     </ul> 
    </div> 
</section> 

我如何想做到這一點？我很高興使用jQuery或一些插件。我想它的工作就像這樣：geehair.com

從一個塊更改爲另一個。

我用古比（不引導），不判斷我請，是不是我的選擇。

有什麼建議嗎？

Answer 1

您可以使用jCarousel plugin.First下載使用示例：

<link rel="stylesheet" type="text/css" href="jcarousel.basic.css"> 

<script type="text/javascript" src="../../libs/jquery/jquery.js"></script> 
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script> 

<script type="text/javascript" src="jcarousel.basic.js"></script> 
<div class="wrapper"> 
      <h1>Basic carousel</h1> 

      <p>This example shows how to setup a basic carousel with prev/next controls and pagination.</p> 

      <div class="jcarousel-wrapper"> 
       <div class="jcarousel"> 
        <ul> 
         <li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li> 
         <li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li> 
         <li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li> 
         <li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li> 
         <li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li> 
         <li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li> 
        </ul> 
       </div> 

       <p class="photo-credits"> 
        Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a> 
       </p> 

       <a href="#" class="jcarousel-control-prev">&lsaquo;</a> 
       <a href="#" class="jcarousel-control-next">&rsaquo;</a> 

       <p class="jcarousel-pagination"> 

       </p> 
      </div> 
     </div> 

你會發現完整的示例here 和現場demo