Bootstrap carousel: How to slide two carousel sliders at a same time?

Question

I have three carousel sliders on the single page and I want them to move two of them at the same time .i.e. both should change slider images at the same time. Both have same number of images/slides. Here is the code I am 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 left and right sliders have very little delay in changing slides. And this delay goes on increasing. Any known issues with this kind of problem? Link to the site is this.

JSFiddle: Link

this has to do with the CSS transition on the carousel maybe. See also: http://stackoverflow.com/questions/17332431/how-can-i-control-the-speed-that-bootstrap-carousel-slides-in-items and this: http://stackoverflow.com/questions/4838972/how-to-sync-css-animations-across-multiple-elements — Bass Jobsen, Dec 20 '13 at 23:14

zessx · Answer 1 · 2013-12-31T14:45:27.437

To avoid this delay, you could manually launch both carousels at the same time, and use customized treatments for events.

Option #1 :

Syncronized init
Simple launch events on both carousels
Pause on hover (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>

Bootply example

Option #2

Desynchronized init
Duplicate events on both carousels as soon as it occurs
No pause on hover

$('.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 not the .sliding class is necessary, to avoid an infinite loop.

Bootply example

Even the Bootply link you provided, just have a look at it after some time, it's timing does not remain same after some time. — atif, Dec 31 '13 at 14:02
`$('.carousel-sync').carousel('cycle');` launch auto-change, but there's a pause on `mouseover`. (I'm currently looking for a better solution to avoid desynchronization) — zessx, Dec 31 '13 at 14:26
The problem still remains :( You can look at it on the site I mentioned in my question. — atif, Dec 31 '13 at 17:45
Hey good news, my problem looks like it is fixed, but I will wait until tomorrow and then will accept your answer :) — atif, Dec 31 '13 at 18:11
Hey. Just dropping a line that your bootply examples no longer work, and that the first code sample will desynchronize the carousels if you leave the tab opened, and return to it, after having browsed for a while in another tab. — Maciej Gurban, Feb 11 '14 at 19:39

score 3 · Answer 2 · answered Jun 11 '18 at 11:46

Since the answer of @zessx does not work properly anymore after changing slides by using the carousel-indicators, I want to provide an extended answer based on his option #2. This extended answer will also sync slide changes triggered by clicks on carousel-indicators:

$('.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');
});

// sync clicks on carousel-indicators as well
$('.carousel-indicators li').click(function (e) {
    e.stopPropagation();
    var goTo = $(this).data('slide-to');
    $('.carousel-sync').not('.sliding').addClass('sliding').carousel(goTo);
});

Please note that this requires the synced carousels to have the same number of slides. If it is not the case, you have to add a fallback for those cases where "goTo" does not exist for all synced carousels.

Your fix seems to work except whenever I go from my first slide to my third slide it makes both slides active (of 1 of the sliders) and wont disapear. Any idea how this is possible? — Justin Dekkers, Jan 03 '19 at 13:56
@JustinDekkers : My guess is that you have an "active" class on some carousel-inner > item in your cshtml where it does not belong. Without seeing the code it is hard to tell. — René, Jan 07 '19 at 13:27

score 2 · Answer 3 · answered Jan 07 '14 at 12:26

Sorry if i have missed something in the question, but if you want the upper and lower carousels to sync, you can hook the 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/

score 1 · Answer 4 · answered Nov 15 '18 at 10:57

If you are using Twitter Bootstrap 3 (didn't check with 4). You can use classes instead of id's.

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

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

In the above case carousel-sync. Then in the controls you just use href=".carousel-sync". And it will work in all directions.

score 0 · Answer 5 · answered Mar 31 '22 at 06:31

0

if you are using the latest bootstrap 4 or 5.

$('.carousel-1').on('slide.bs.carousel', function(ev) {
  $('.carousel-2').carousel(ev.to);
});

answered Mar 31 '22 at 06:31

pdchaudhary

378
3
15

Bootstrap carousel: How to slide two carousel sliders at a same time?

5 Answers5

Option #1 :

Option #2

Linked