Bootstrap carousel:如何同时滑动两个旋转木马滑块？

Question

我在单页上有三个旋转木马滑块,我希望它们同时移动其中两个.我们都应该同时更改滑块图像.两者都有相同数量的图像/幻灯片.这是我正在使用的代码:

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

但左右滑块在更换幻灯片时几乎没有延迟.这种延迟继续增加.这类问题有哪些已知问题？链接到该网站是这样的.

JSFiddle:链接

Answer 1

为避免此延迟,您可以同时手动启动两个轮播,并使用自定义的事件处理方法.

选项1 :

• 同步初始化
• 两个转盘上的简单发布活动
• 暂停时悬停(我想念你不需要它)

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

选项#2

• 去同步初始化
• 一旦发生转盘,两个转盘上都会发生重复事件
• 悬停时没有暂停

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

请不要.sliding上课是必要的,以避免无限循环.

Bootply示例