0

我设置了 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在他们页面顶部的内容，也许有一个更简单的方法来实现它我不确定。再次感谢。

4

1 回答 1

2

这是一种链接两个 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;
    }
});

演示

在 Opera 中进行测试，并参考 Sparky672 的评论，我没有遇到任何问题wrap:"circular"。

于 2012-12-09T22:46:28.603 回答