Question

为什么我的代码不起作用？我遵循了所有的指示！首先启动将控制另一个的滑块。添加asNavFor：并同步： 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>

Answer 1

不确定您的确切想法，但是您应该确保用作导航的滑块显示多个幻灯片，以便用户可以单击它们来更改第二张幻灯片的幻灯片。

因此，添加“itemWidth”：

itemWidth: 100

或者不要禁用directionNav。

演示：

http://jsfiddle.net/JC46C/

如何同步jquery flexslider？

1 个答案: