flexslider - two sliders together - Directional Nav sliding only one slider some times. How to solve this?

Question

I am using two sliders together. One for images - .flexslider another one for text - .flexslider2

for both sliders I am using a single directional Nav. 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

1st three slides are working fine when I click next or prev button. 4th or there after if click the next / prev button image is sliuder not the text.

I suspect it's because of the slider animation speed. .flexslider animation speed = 4000 and .flexslider2 animation speed = 2500

any how I could not fix this. how can I fix this?

any help will be appreciated.

** this question is related to this question

Answer 1

The fastest animation will be ready first than others, so if you click on next in this time only the fastest slide will change.

I added a flag isAnimating in your code and changed de functions before and after to set this flag.

Take a look in your code updated