Flexslider - How to make two slider functioning together (images and a paragraph text) using a single directionNav?

Question

My mark up is

        <div class="slide_container">
             <div class='bg_container'>
                <div id='bg_slider' class='flexslider' >
                    <ul id='slide_set' class='slides'>
                        <li>image 1</li>
                        <li>image 2</li>
                        <li>image 3</li>
                        <li>image 4</li>            
                    </ul>
                    <div id='glass_div'></div> 
                </div>                    
            </div>
            <div class='tex_slide_container'>
                <div id='message' class='flexslider2'>
                    <ul id='content_slide_holder' class='slides'>
                        <li>
                            <div class='text_holder'>  
                                <div class='text_div'>text 1</div>
                            </div>                            
                        </li>
                        <li>
                            <div class='text_holder'>  
                                <div class='text_div'>text 1</div>
                            </div>                           
                        </li>
                        <li>
                            <div class='text_holder'>  
                                <div class='text_div'>text 1</div>
                            </div>                        
                        </li>
                        <li>
                            <div class='text_holder'>  
                                <div class='text_div'>text 1</div>
                            </div>                         
                        </li>   
                    </ul>    
                </div>                    
            </div>                    
        </div>

*My JS script is : *

<script type="text/javascript">
    $(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
        }           
    );          
    });
</script>

my css is : here

I am not willing to change the mark up.

The situation is after I enable the directionNav if I click the Nav button the images are sliding, not the paragraph.

I am trying to slide both texts (text holder) and the image together.

How can I do that? Any help will be appreciated.

Answer 1

You need to implement your own nex/prev (u can add navigator image etc as per ur requirement these is just for demo how nex/prev can work.) As if 2 flexslider navigation html will be conflict. and only one will be navigate.

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);     
  });