Jquery cycle2 carousel使用div不工作

时间:2013-11-07 09:24:30

标签: jquery jquery-plugins jquery-cycle2

我遇到了cycle2 carousel插件的问题。 you can find my fiddle here和底部的代码。在小提琴中,它不起作用,但在Visual Studio中它只向右旋转但是当我向左(前一个)并到达第一个div时,它不会将最后一个div带到前面而只是一个空位。 / p>

这是代码:

<body>
<form id="form1" runat="server">
    <div id="container">
        <div id="header">
            <div id="arrows">
                <div id="left">
                    <a class="slider" href="#" id="prev">
                        <img src="LeftArrow.png" />
                    </a>
                </div>
                <div id="right">
                    <a class="slider" href="#" id="next">
                        <img src="RightArrow.png" />
                    </a>
                </div>
            </div>
        </div>
        <div id="contentBox">
            <div id="section-home" class="cycle-carousel-wrap" data-cycle-fx="carousel" data-cycle-carousel-visible="7" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-next="#next" data-cycle-prev="#prev" data-cycle-carousel-fluid="true">
                <div class="box" style="background-color: blue;">
                    1
                </div>
                <div class="box" style="background-color: green;">
                    2
                </div>
                <div class="box" style="background-color: red;">
                    3
                </div>
                <div class="box" style="background-color: yellow;">
                    4
                </div>
                <div class="box" style="background-color: purple;">
                    5
                </div>
                <div class="box" style="background-color: orange;">
                    6
                </div>
                <div class="box" style="background-color: blueviolet;">
                    7
                </div>
            </div>
        </div>
    </div>
    <div id="script">
        <script type="text/javascript">
            $('body').niceScroll();

            var tempWidth = 0;
            $('#contentBox .box').each(function () {
                tempWidth += $(this).outerWidth(true);
            });
            $('#contentBox').css({ 'width': tempWidth });

            $.fn.cycle.defaults.autoSelector = '.cycle-carousel-wrap';
        </script>
    </div>
</form>

div向左浮动,宽度为550px。任何帮助将不胜感激

1 个答案:

答案 0 :(得分:1)

将类循环幻灯片添加到id为section-home的div中。

<div id="section-home" class="cycle-slideshow cycle-carousel-wrap" ...