多個Jcarousel

Question

我在一個頁面上有兩個JCarousel。對於頂轉盤的控件（上一頁/下一頁）所控制的第二輪播：

<div class="jcarousel2-wrapper"> 

<div class="jcarousel2"> 
    <ul id="quotes"> 
    <li><img src="assets/Uploads/a.jpg" width="300" height="100" alt=""></li> 
    <li><img src="assets/Uploads/b.jpg" width="300" height="100" alt=""></li> 
    <li><img src="assets/Uploads/c.jpg" width="300" height="100" alt=""></li> 
    </ul> 
</div> 

<a href="/assembly/index.php/home-2/#" class="jcarousel-control-prev">&lsaquo;</a> 
<a href="/assembly/index.php/home-2/#" class="jcarousel-control-next">&rsaquo;</a> 

</div> 


<div class="jcarousel-wrapper"> 

<div class="jcarousel"> 
    <ul id="wide"> 
    <li><img src="assets/Uploads/1978506-10152294289342922-1805665805-o.jpg" alt=""></li> 
    <li><img src="assets/Uploads/backcoffee-square.png" alt=""></li> 
    </ul> 
</div> 

<a href="/assembly/index.php/home-2/#" class="jcarousel-control-prev">&lsaquo;</a> 
<a href="/assembly/index.php/home-2/#" class="jcarousel-control-next">&rsaquo;</a> 

</div> 

我也有這樣的：

<script type="text/javascript"> 

    jQuery(document).ready(function() { 

     jQuery('.quotes').jcarousel(); 

     jQuery('#wide').jcarousel({ 
      vertical: true 
     }); 
    }); 

</script> 

任何想法？

謝謝，

Alan。

Answer 1

您至少必須更改第二個輪播的prev &下一個按鈕的類別並更新jcarousels文件中生成的JavaScript。

我會盡量避免放在同一頁上的旋轉木馬。

Answer 2

有一個的jCarousel控制插件，會給你這種行爲，並複製類應該罰款。

控制插件的設置/例如： http://sorgalla.com/jcarousel/docs/plugins/control/reference/installation.html

一旦你包括你的頁面上的插件，代碼應該是簡單：

$(function() { 
    $('.jcarousel').jcarousel({ 
     // Core configuration goes here 
    }); 

    $('.jcarousel-control-prev').jcarouselControl({ 
     target: '-=1' 
    }); 

    $('.jcarousel-control-next').jcarouselControl({ 
     target: '+=1' 
    }); 
}); 

只要每個組的控制是在它的旋轉木馬的包裝中，在一個頁面上使用多個jcarousels相當簡單，即使使用相同的旋轉木馬類。