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

问题

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

回答1:

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

回答2:

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/

回答3:

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.

回答4:

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.

来源：https://stackoverflow.com/questions/20710222/bootstrap-carousel-how-to-slide-two-carousel-sliders-at-a-same-time