flexslider中的第一个和最后一个活动类现在可以正常工作

时间:2016-09-19 05:04:07

标签: javascript jquery jquery-plugins flexslider

我在转盘中使用FlexSlider jquery插件,在网页中显示不同的推荐,我在第一个循环中的最后一个项目的活动类和第一个循环后的第一个项目有问题,活动类没有被赋值和特效不好用。如果我点击了每个项目,则会分配该类,但第一个项目不会移动到初始位置。

我的HTML代码如下所示:

<div id="slider" class="flexslider">
    <ul class="slides">
        <li>
            <div class="client">
                <div class="t-box">
                    <blockquote>
                        Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. 
                    </blockquote>
                </div>
            </div>
        </li>
        <li>
            <div class="client">
                <div class="t-box">
                    <blockquote>
                        Praesent egestas neque eu enim. Vestibulum suscipit nulla quis orci. Maecenas tempus,
                    </blockquote>
                </div>
            </div>
        </li>
        <!-- items mirrored twice, total of 12 -->
    </ul>
</div>
<div style="width: 100%; max-width: 980px; overflow: hidden; margin: auto; ">
    <div id="carousel" class="flexslider">
        <ul class="slides">
            <li>
                <div class="name">
                    <h3>Vestibulum volutpat pretium</h3>
                    <small>Cras risus ipsum</small>
                </div>
            </li>
            <li>
                <div class="name">
                    <h3>Sed in libero</h3>
                    <small>Donec vitae orci <br />Praesent ac.</small>
                </div>
            </li>
            <li>
                <div class="name">
                    <h3>Praesent vestibulum dapibus</h3>
                    <small>Duis lobortis massa <br/>Sed mollis eros.</small>
                </div>
            </li>
            <li>
                <div class="name">
                    <h3>Sed aliquam ultrices</h3>
                    <small>Donec elit libero<br/>In hac habitasse</small>
                </div>
            </li>
            <!-- items mirrored twice, total of 12 -->
        </ul>
    </div>
</div>

我使用以下代码初始化flexslider:

$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    directionNav: false,
    animationLoop: true,
    slideshow: true,
    itemWidth: 280,
    itemMargin: 0,
    asNavFor: '#slider',
    slideshowSpeed: 5000, 
    maxItems: 1,
});

$('#slider').flexslider({
    animation: "fade",
    controlNav: false,
    directionNav: false,
    animationLoop: true,
    slideshow: true,
    sync: "#carousel",
    slideshowSpeed: 5000,
    maxItems: 1,
});

完整的示例是here

我的flexslider实现有什么问题?

0 个答案:

没有答案