jquery - 使用两个 jcarousel 并让一个影响另一个

Question

我设置了 sorgalla jcarousel 插件，我试图做的是有两个轮播实例，其中一个影响另一个。一个将具有 block /垂直样式，另一个将具有水平样式。

不幸的是，我才刚刚开始学习 Javascript 和 Jquery，所以我不太确定如何从这里开始，任何关于我至少可以看看的帮助建议都会很棒。

这是被调用两次的函数...

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
  start: 2, // Configuration goes here
    wrap: "circular",
    auto: 1,
    scroll: 1,

});
});

jQuery(document).ready(function() {
jQuery('#second-carousel').jcarousel({
    start: 2, // Configuration goes here
    wrap: "circular",
    auto: 1,
    scroll: 1,

});
});
</script>

这是我实际插入 jcarousel 的地方...

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li>test</li>
    <li>test1</li>
    <li>test2</li>

    </li>
</ul>

<ul id="second-carousel" class="jcarousel-skin-tango">
    <li>test</li>
    <li>test1</li>
    <li>test2</li>

    </li>
</ul>

有没有一种方法可以同步两者，所以当我按下顶部的方向导航时，它也可以控制第二个？这是他们正在接受测试的网站...... http://gonuts.ie/?page_id=99

最终我的目标是实现什么http://www.skysports.com在他们的页面顶部，也许有一种更简单的方法我不确定。再次感谢。

Answer 1

这是一种链接两个 jCarousel 的方法，就像 Skysports 网站一样(注意到 Rick Calder 的评论，Skysports 示例是一个单一的轮播)。

var carousel_2;
$('#mycarousel').jcarousel({
    start: 1,
    wrap: "circular",
    scroll: 1,
    itemFirstInCallback: {
        onBeforeAnimation: function(carousel, item, index, action) {
            if (carousel_2) {
                carousel_2[action]();
            }
        }
    }
});
$('#second-carousel').jcarousel({
    start: 2,
    wrap: "circular",
    scroll: 1,
    vertical: true,
    buttonNextHTML: null,
    buttonPrevHTML: null,
    initCallback: function(c) {
        carousel_2 = c;
    }
});

DEMO

在 Opera 中测试，并引用 Sparky672 的评论，我在 wrap:"circular" 方面没有遇到任何问题。