javascript - flexslider - 两个 slider 在一起 - Directional Nav 有时只滑动一个 slider 。如何解决这个问题？

Question

我同时使用了两个 slider 。一个用于图像 - .flexslider另一个用于文本 - .flexslider2

对于两个 slider ，我使用的是单向导航。 FIDDLE DEMO OS HERE

        $(window).load(function() {
    $("#slide_row").show();
    var count = 0 ; 

    $("#loaing_animation").hide();

$("#next").on("click" , function (e) { 
     var $slider = flex1.data('flexslider');

    $slider.flexAnimate($slider.getTarget("next"), true);  
    var $slider = flex2.data('flexslider');
     $slider.flexAnimate($slider.getTarget("next"), true); 

});

 $("#prev").on("click" , function (e) { 
     var $slider = flex1.data('flexslider');

    $slider.flexAnimate($slider.getTarget("prev"), true);  
    var $slider = flex2.data('flexslider');
     $slider.flexAnimate($slider.getTarget("prev"), true); 

});

  var flex1 =  $('.flexslider').flexslider(
    {
        animation: "slide",
        animationSpeed: 4000,
        easing: "swing",
        slideshowSpeed: 10000,
        touch:false,
        before: function(){
            if(count == 1 ){
                $('#static_path').attr('id','moving_path');
                $('.empty_wings').attr('class','wings');
                $('.empty_body').attr('class','birdbody');
            }
            count++;                                              
        },
        after: function(){
        },controlNav: false,
        directionNav: false,
        slideshow:true


    }           
);
var flex2=    $('.flexslider2').flexslider(
    {
        animation: "slide",
        animationSpeed: 2500,
        easing: "swing",
        slideshowSpeed: 10000,
        touch:false,
        before: function(){
        },
        after: function(){
        },
        controlNav: false,
        directionNav: false,
        slideshow:true
    }           
);          
});

FIDDLE DEMO IS HERE

当我单击下一个或上一个按钮时，第一个三张幻灯片工作正常。第四次或之后如果单击下一个/上一个按钮图像是 sliuder 而不是文本。

我怀疑这是因为 slider 动画速度。.flexslider 动画速度 = 4000 和 .flexslider2 动画速度 = 2500

无论如何我都无法解决这个问题。我该如何解决这个问题？

我们将不胜感激。

** 此问题与 this question 有关

Answer 1

最快的动画将比其他动画先准备好，因此如果您在此时单击next，则只有最快的幻灯片会发生变化。

我在您的代码中添加了一个标志 isAnimating 并更改了函数 before 和 after 以设置此标志。

查看 your code updated