Flex Slider - How to add same controls for two sliders

Question

I am using Flex slider for one project. I need to control two sliders on one page with same controls.

One part is main slider that will show images, and the second o

Answer 1

One solution I found was to create you own custom banner navigation. Position it and style it however you like. The only important thing is having a way to target it. In this example I used an ID of slider-next and slider-prev.

  
Next
  
Prev

Now, create two flexer sliders and position them however you would like in your css. I will title my main banner .flexslider and my caption .captions.

  

    

    

    

    

  



  

    

      
Example Banner 1
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Read More
    
    

      
Example Banner 2
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Read More
    
    

      
Example Banner 3
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Read More
    
    

      
Example Banner 4
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Read More
    
  

Now for the simple magic to make it work. Activate both slides in your javascript file and hide the banner and caption's nav controls in the css. That way your custom navigation will be the only controls visible. Then, just create a function to trigger both the slider and caption's control navs on click. Example down below. The .trigger jQuery function is what does the wizardry here. Check out its documentation here: http://api.jquery.com/trigger/

//Load slider after .ready()
$(window).load(function(){

    //Activate Both Banner and Caption slides
    $('.flexslider').flexslider({
        controlNav: false,
    });

    $('.captions').flexslider({
        controlNav: false,
    });

    //Sink Control Navs
    $('#slider-next').click(function(){
        $('.flexslider .flex-next').trigger('click');
        $('.captions .flex-next').trigger('click');
    });

    $('#slider-prev').click(function(){
        $('.flexslider .flex-prev').trigger('click');
        $('.captions .flex-prev').trigger('click');
    })
});