Question

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

不幸的是我只是开始学习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>

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

<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

这是一种将两个jCarousels链接为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"的任何问题。

使用两个jcarousels，一个影响另一个

1 个答案: