Javascript 如何同步jquery FlexSlider？

为什么我的代码不起作用？我遵守了所有的指示！首先初始化将控制另一个的滑块。添加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

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

因此，etiher添加一个“itemWidth”：

或者不要禁用directionNav

演示：

<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: 100