ブートストラップカルーセル：2台のカルーセルスライダーを同時にスライドさせる方法は？

Question

私は1ページに3つのカルーセルスライダーを持っており、同時に2つのカルーセルスライダーを移動させたいのです。両方とも同時にスライダ画像を変更する必要があります。どちらも同じ数の画像/スライドを持っています。ここで私が使用していたコードです：

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

そしてまた、私は以下のコードを試してみました：

jQuery('.carousel').carousel({ 
    pause:'false' 
}); 

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

しかし、左と右のスライダがスライドを変更するにはほとんど遅延を有します。そして、この遅れはますます増えていきます。この種の問題に関する既知の問題はありますか？サイトへのリンクはthisです。

JSFiddle：Link

Answer 1

この遅延を回避するには、手動で同時に両方のカルーセルを起動し、イベントのためにカスタマイズされた治療法を使用することができます。

オプション＃1：

• Syncronizedのinitホバー上の両方のカルーセルに
• シンプル打ち上げイベント
• ポーズ（私はあなたがそれを必要としなかった逃した）

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

オプション＃2

• 非同期化のinit
とすぐに、両方のカルーセルに
• 重複イベント、それが

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

ホバーには一時停止をしてください起こるようではなく無限ループを避けるために、クラスが必要です。申し訳ありません

Bootply example

Answer 2

slideイベントとは反対に、私は問題の何かを見逃している、しかし、あなたが同期する上下のカルーセルをしたい場合、あなたはslidイベントをフックすることができます。

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/