如何同步jquery flex滑块

How to sync jquery flexsliders?

本文关键字：jquery flex 滑块 同步 何同步      更新时间：2023-09-26

为什么我的代码不起作用？我遵守了所有的指示！首先初始化将控制另一个的滑块。添加asNavFor:和sync:。HTML没有错误。两个滑块单独工作都很好，但由于某些原因，它们不会同步。。。令人沮丧！

$(".flexslider2").flexslider({
    slideshow: false, 
    animation: "slide",
    direction: "vertical",
    reverse: true,
    controlNav: false,
    animationLoop: false,
    directionNav: false,
    asNavFor: ".flexslider"
});
$(".flexslider").flexslider({
    slideshow: false,
    animation: "slide",
    direction: "vertical",
    directionNav: false,
    animationLoop: false,
    controlNav: false,
    sync: ".flexslider2"
});

HTML

<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<div class="container">
    <div class="flexslider2">
        <ul class="slides">
            <li><div class="slide slide4"></div></li>
            <li><div class="slide slide5"></div></li>
            <li><div class="slide slide6"></div></li>
        </ul>
    </div>
    <div class="flexslider">
        <ul class="slides">
            <li><div class="slide slide1"></div></li>
            <li><div class="slide slide2"></div></li>
            <li><div class="slide slide3"></div></li>
        </ul>
    </div>  
</div>

不确定你到底想了什么，但你应该确保作为导航的滑块显示多张幻灯片，这样用户就可以点击它们来更改第二张幻灯片的幻灯片。

因此，她添加了一个"itemWidth"：

itemWidth: 100

或者不禁用directionNav。

演示：

http://jsfiddle.net/JC46C/

相关文章：