Flexslider – ¿Cómo hacer que dos slider funcionen juntos (imágenes y un texto de párrafo) usando una sola direcciónNav?

Mi marca es

  • image 1
  • image 2
  • image 3
  • image 4
  • text 1
  • text 1
  • text 1
  • text 1

* Mi script JS es: *

  $(window).load(function() { $("#slide_row").show(); var count = 0 ; $("#loaing_animation").hide(); $('.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: true } ); $('.flexslider2').flexslider( { animation: "slide", animationSpeed: 2500, easing: "swing", slideshowSpeed: 10000, touch:false, before: function(){ }, after: function(){ }, controlNav: false, directionNav: true } ); });  

mi css es: aqui

No estoy dispuesto a cambiar la marca.

La situación es después de que habilite la dirección de navegación Nav si hago clic en el botón de navegación, las imágenes se están deslizando, no el párrafo.

Estoy tratando de deslizar ambos textos (titular de texto) y la imagen juntos.

¿Cómo puedo hacer eso? Cualquier ayuda será apreciada.

Debe implementar su propio nex / prev (puede agregar una imagen del navegador, etc. según su requisito, esto es solo para la demostración de cómo puede funcionar nex / prev.) Como si 2 flexslider navigation html sea conflictivo. y solo uno será navegar.

Fiddle DEMO

  $("#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); });