使用 div 的 Jquery cycle2 轮播不起作用答案

【问题标题】：Jquery cycle2 carousel using divs not working使用 div 的 Jquery cycle2 轮播不起作用
【发布时间】：2014-01-27 00:40:43
【问题描述】：

我遇到了关于 cycle2 carousel 插件的问题。 you can find my fiddle here 和底部的代码。在小提琴中它不能完全工作，但在 Visual Studio 中它只会向右旋转，但是当我向左（上一个）并到达第一个 div 时，它不会把最后一个 div 带到前面，而只是一个空的地方。

代码如下：

<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 向左浮动，宽度为 550 像素。任何帮助将不胜感激

【问题讨论】：

标签： jquery jquery-plugins jquery-cycle2

【解决方案1】：

将类cycle-slideshow添加到id为section-home的div中。

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

【讨论】：

这不能正常工作。如果您使用简单的轮播效果并添加循环幻灯片类，它只会将其转换为默认效果。