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

你至少要改变你的第二个旋转木马的上一级＆amp;下一步按钮并更新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也相当简单。