Я использую два ползунка вместе. Один для изображений -.flexslider другой для текста -.flexslider2
для обоих слайдеров я использую однонаправленный Nav. FIDDLE DEMO OS ЗДЕСЬ
$(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
}
);
});
Первые три слайда работают нормально, когда я нажимаю кнопку "Далее" или "Назад". 4-й или после этого, если щелкнуть по следующей/предыдущей кнопке, изображение будет слюдером, а не текстом.
Я подозреваю это из-за скорости анимации слайдера. .flexslider анимация скорость = 4000 и.flexslider2 скорость анимации = 2500
любой, как я не мог это исправить. Как я могу это исправить?
любая помощь будет оценена.
** этот вопрос связан с этим вопросом
Самая быстрая анимация будет готова раньше, чем другие, поэтому, если вы нажмете next
в это время изменится только самый быстрый слайд.
Я добавил флаг isAnimating
в вашем коде и изменил функции before
и after
чтобы установить этот флаг.
Взгляните в your code updated