Flex Slider - How to add the same controls for two sliders

Question

I use Flex slide for one project. I need to manage two sliders on the same page with the same controls.

One part is the main slider, which will show images, and the second is text (in this case it will be taken from "the_excerpt" in WP).

Basically, this is the code that I use to call two slides on the same page:

$(window).load(function() { $('#main-slider').flexslider({ animation: 'slide', controlsContainer: '.flex-container' }); $('#secondary-slider').flexslider(); }); 

Now I need to “connect” both of them to the same controls, so when I click on the arrow, it will slide / disappear for both of them.

Answer 1

You can accomplish what you are trying to do by switching the controlContainer setting and creating your own navigation, which you then associate with both sliders. Here is an idea of ​​how (please note that this is not verified)

Your markup will look something like this. Pay attention to the rel attribute on the links - we will use them below. Also note that the values ​​start at 0 - this corresponds to the values ​​for the slides (for example, the first slide is 0, the second is 1, etc.).

 <a rel="0" class="slide_thumb" href="#">slide link 1</a> <a rel="1" class="slide_thumb" href="#">slide link 2</a> <a rel="2" class="slide_thumb" href="#">slide link 3</a> <a rel="3" class="slide_thumb" href="#">slide link 3</a> <div id="main-slider" class="flexslider"> <ul class="slides"> <li> <img src="image1.jpg" /> </li> <li> <img src="image2.jpg" /> </li> <li> <img src="image3.jpg" /> </li> <li> <img src="image4.jpg" /> </li> </ul> </div> <div id="secondary-slider" class="flexslider"> <ul class="slides"> <li> <p>Text 1</p> </li> <li> <p>Text 2</p> </li> <li> <p>Text 3</p> </li> <li> <p>Text 4</p> </li> </ul> 

Then you set up the flexslider call

 <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function($) { $('#main-slider').flexslider({ animation: "slide", slideToStart: 0, start: function(slider) { $('a.slide_thumb').click(function() { $('.flexslider').show(); var slideTo = $(this).attr("rel")//Grab rel value from link; var slideToInt = parseInt(slideTo)//Make sure that this value is an integer; if (slider.currentSlide != slideToInt) { slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want); } }); } }); $('#secondary-slider').flexslider({ animation: "slide", slideToStart: 0, start: function(slider) { $('a.slide_thumb').click(function() { $('.flexslider').show(); var slideTo = $(this).attr("rel")//Grab rel value from link; var slideToInt = parseInt(slideTo)//Make sure that this value is an integer; if (slider.currentSlide != slideToInt) { slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want); } }); } }); }); </script> 

Basically, both sliders are controlled by the same set of navigation links. Think about it, it should make you move in the right direction, but scream if something is explained to you.

Answer 2

For Flexslider 2, you can use the sync: "selector" option. Just set one of the controlNav: false sliders.

 $(window).load(function() { $('#main-slider').flexslider({ animation: 'slide', controlNav: true, sync: '#secondary-slider' }); $('#secondary-slider').flexslider({ controlNav: false }); }); 

Answer 3

So, I had the same problem, and it could be real resistance ... But I came to a quick solution that is as easy as a pie. This will work for 1 child or hundreds of children controlled by the parent flexslider. Works for all actions. Hopefully I can talk to them about this and allow an array of jquery objects for this synchronization method.

 <div id="main-slider" class="flexslider"> <ul class="slides"> <li><img src="image1.jpg" /></li> <li><img src="image2.jpg" /></li> <li><img src="image3.jpg" /></li> <li><img src="image4.jpg" /></li> </ul> </div> <div class="flexslider_children"> <ul class="slides"> <li><p>Text 1</p></li> <li><p>Text 2</p></li> <li><p>Text 3</p></li> <li><p>Text 4</p></li> </ul> </div> <div class="flexslider_children"> <ul class="slides"> <li><p>Text 1</p></li> <li><p>Text 2</p></li> <li><p>Text 3</p></li> <li><p>Text 4</p></li> </ul> </div> 

Then for your javascript just run this.

 /** * Create the children flexsliders. Must be array of jquery objects with the * flexslider data. Easiest way is to place selector group in a var. */ var children_slides = $('.flexslider_children').flexslider({ 'slideshow': false, // Remove the animations 'controlNav' : false // Remove the controls }); /** * Set up the main flexslider */ $('.flexslider').flexslider({ 'pauseOnHover' : true, 'animationSpeed': 2000, 'slideshowSpeed': 5000, 'initDelay': 3000, // Call the update_children_slides which itterates through all children slides 'before' : function(slider){ // Hijack the flexslider update_children_slides(slider.animatingTo); } }); /** * Method that updates children slides * fortunately, since all the children are not animating, * they will only update if the main flexslider updates. */ function update_children_slides (slide_number){ // Iterate through the children slides but not past the max for (i=0;i<children_slides.length;i++) { // Run the animate method on the child slide $(children_slides[i]).data('flexslider').flexAnimate(slide_number); } } 

Hope this helps! Please note: I added that this is very similar to what I was trying to do. Looks like I'm not the only one who wants to use multiple synchronizations in flexslider.

Answer 4

I want to confirm that MrBandersnatch solution works. I post my changes in his code below to show a variation of his work.

 /** * Create the children flexsliders. Must be array of jquery objects with the * flexslider data. Easiest way is to place selector group in a var. */ var children_slides = $('.flexslider_children').flexslider({ slideshow: false, // Remove the animations controlNav : false, // Remove the controls animationSpeed: 1200, itemWidth: 175, itemMargin: 20, animation: 'linear', easing: 'swing', animationLoop: false, minItems: getGridSize(), // use function to pull in initial value maxItems: getGridSize() }); /** * Set up the main flexslider */ $('#flexslider_index_band_1').flexslider({ pauseOnHover : true, animationSpeed: 1200, slideshow: false, initDelay: 3000, directionNav: true, animation: 'linear', easing: 'swing', animationLoop: false, controlsContainer: '.paginated_nav', directionNav: true, prevText: '', nextText: '', itemWidth: 175, itemMargin: 20, sync: '#flexslider_index_band_2', minItems: getGridSize(), // use function to pull in initial value maxItems: getGridSize(), // use function to pull in initial value // Call the update_children_slides which itterates through all children slides before : function(slider){ // Hijack the flexslider update_children_slides(slider.animatingTo); } }); /** * Method that updates children slides * fortunately, since all the children are not animating, * they will only update if the main flexslider updates. */ function update_children_slides (slide_number){ // Iterate through the children slides but not past the max for (i=0;i<children_slides.length;i++) { // Run the animate method on the child slide $(children_slides[i]).data('flexslider').flexAnimate(slide_number); } } 

});

Answer 5

One of the solutions I found was to create my own custom banner navigation. Place it and customize as you like. The only important thing is to have a way to aim at it. In this example, I used the slider-next identifier and prev-slider identifier.

 <ul> <li><a id="slider-next" href="#">Next</a></li> <li><a id="slider-prev" href="#">Prev</a></li> </ul> 

Now create two flexor slider and position them no matter how you want in your css. I will name my main banner .flexslider and my captions .captions.

 <div class="flexslider"> <ul class="slides"> <li><img src="/assets/images/banner-example.png" width="893" height="377"></li> <li><img src="/assets/images/banner-example-2.png" width="893" height="377" /></li> <li><img src="/assets/images/banner-example-3.png" width="893" height="377" /></li> <li><img src="/assets/images/banner-example-4.png" width="893" height="377" /></li> </ul> </div> <!-- Some other place in the code --> <div class="captions"> <ul id="info" class="slides"> <li> <h2>Example Banner 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="read-more">Read More</a> </li> <li> <h2>Example Banner 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="read-more">Read More</a> </li> <li> <h2>Example Banner 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="read-more">Read More</a> </li> <li> <h2>Example Banner 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="read-more">Read More</a> </li> </ul> </div> 

Now for simple magic to make it work. Activate both slides in a javascript file and hide the banner and header controls in css. Thus, your user navigation will be the only visible control. Then just create a function that allows you to launch the slider and caption control buttons. An example is below. The .trigger jQuery function is what magic does here. Check out his 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'); }) });