Bootstrap Coil: How to move two carousel slider at the same time?

Question

I have three carousel sliders on one page, and I want them to move two of them at the same time. ie both must simultaneously change the slider images. Both have the same number of images / slides. Here is the code I'm using:

jQuery('#carousel-example-generic1, #carousel-example-generic2').carousel({ interval: 4000 }); 

And also I tried this code below:

 jQuery('.carousel').carousel({ pause:'false' }); jQuery('#carousel-example-generic1').on('slide', function(){ jQuery('#carousel-example-generic2').carousel('next'); }); 

But the left and right sliders have a very small delay when changing slides. And this delay continues. Any known issues with such a problem? Link .

JSFiddle: Link

Answer 1

To avoid this delay, you can manually start both carousels at the same time and use individual procedures for events.

Option number 1:

• Synchronized init
• Simple trigger events on both carousels
• Pause when freezing (I missed, you didn’t need it)

 $('.carousel-sync').carousel('cycle'); $('.carousel-sync').on('click', '.carousel-control[data-slide]', function (ev) { ev.preventDefault(); $('.carousel-sync').carousel($(this).data('slide')); }); $('.carousel-sync').on('mouseover', function(ev) { ev.preventDefault(); $('.carousel-sync').carousel('pause'); }); $('.carousel-sync').on('mouseleave', function(ev) { ev.preventDefault(); $('.carousel-sync').carousel('cycle'); }); 

 <div id="carousel-a" class="carousel slide carousel-sync"> ... </div> <div id="carousel-b" class="carousel slide carousel-sync"> ... </div> 

Download Example

Option number 2

• Desynchronized init
• Duplicate events on both carousels as soon as this happens.
• No pause on mouseover

 $('.carousel-sync').on('slide.bs.carousel', function(ev) { // get the direction, based on the event which occurs var dir = ev.direction == 'right' ? 'prev' : 'next'; // get synchronized non-sliding carousels, and make'em sliding $('.carousel-sync').not('.sliding').addClass('sliding').carousel(dir); }); $('.carousel-sync').on('slid.bs.carousel', function(ev) { // remove .sliding class, to allow the next move $('.carousel-sync').removeClass('sliding'); }); 

 <div id="carousel-a" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false"> ... </div> <div id="carousel-b" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false"> ... </div> 

Please do not use the .sliding class to avoid an infinite loop.

Download Example

Answer 2

Sorry if I missed something in this question, but if you want to synchronize the upper and lower carousels, you can slid event, as opposed to the slide event.

JS:

 jQuery('#carousel-example-generic2').carousel({ pause:'false' }); jQuery('#carousel-example-generic2').on('slid', function(){ jQuery('#carousel-example-generic1').carousel('next'); }); 

http://jsfiddle.net/FKQS8/5/