多个 Jcarousel答案

【问题标题】：Multiple Jcarousel多个 Jcarousel
【发布时间】：2014-04-26 01:23:24
【问题描述】：

我在一个页面上有两个 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>

有什么想法吗？

谢谢，

艾伦。

【问题讨论】：

标签： jquery controls jcarousel

【解决方案1】：

您至少必须更改第二个轮播的上一个和下一个按钮的类别，并在 jcarousels 文件中更新生成的 javascript。

我会尽量避免将轮播放在同一页面上。

【讨论】：

【解决方案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'
    });
});

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

【讨论】：