Question

我一起使用两个滑块。一个用于图像 - .flexslider 另一个用于文本 - .flexslider2

对于两个滑块我使用单向导航。 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而不是文本。

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

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

任何帮助将不胜感激。

**此问题与this question

有关

Answer 1

最快的动画将首先准备就绪，因此如果您在此时点击next，则最快的幻灯片将会更改。

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

查看 your code updated

flexslider - 两个滑块在一起 - Directional Nav只滑动一个滑块一些。怎么解决这个？

1 个答案: