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

有什么想法吗？

谢谢,

艾伦。

Answer 1

您至少必须更改第二个carousel的prev & next按钮的类，并更新jcarousel文件中生成的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'
    });
});

只要每组控件都在带有其carousel的包装器中，那么在一个页面上拥有多个jcarousel是相当简单的，即使使用相同的carousel类也是如此。