Bootstrap carousel：如何同时滑动两个 carousel 滑块？

Posted 2023-03-06

【中文标题】Bootstrap carousel：如何同时滑动两个 carousel 滑块？

【英文标题】：Bootstrap carousel: How to slide two carousel sliders at a same time?

【发布时间】：2014-01-09 16:55:40

【问题描述】：

我在单个页面上有三个轮播滑块，我希望它们同时移动其中两个。即两者都应同时更改滑块图像。两者都有相同数量的图像/幻灯片。这是我正在使用的代码：

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

【问题讨论】：

这可能与轮播上的 CSS 过渡有关。另请参阅：***.com/questions/17332431/… 和此：***.com/questions/4838972/…

【参考方案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 example

选项 #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 example

【讨论】：

即使是你提供的 Bootply 链接，过段时间再看一下，一段时间后它的时间就不一样了。

我网站上的轮播停止了自动更改滑块

$('.carousel-sync').carousel('cycle'); 启动自动更改，但在 mouseover 上有暂停。 （我目前正在寻找更好的解决方案来避免去同步）

@atif 我又试了，你可以看看。

问题依然存在:(你可以在我在我的问题中提到的网站上查看。

【参考方案2】：

抱歉，如果我遗漏了问题中的某些内容，但如果您希望上下轮播同步，您可以挂钩 slid 事件，而不是 slide 事件。

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】：

由于@zessx 的答案在使用轮播指示器更改幻灯片后不再正常工作，因此我想根据他的选项 #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');
);

// 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);
);

请注意，这要求同步的轮播具有相同数量的幻灯片。如果不是这种情况，您必须为所有同步轮播不存在“goTo”的情况添加后备。

【讨论】：

您的修复似乎有效，除非每当我从第一张幻灯片转到第三张幻灯片时，它都会使两张幻灯片（其中一个滑块）都处于活动状态并且不会消失。知道这怎么可能吗？

@JustinDekkers ：我的猜测是，您的 cshtml 中某些 carousel-inner > 项目上有一个“活动”类，它不属于它。没有看到代码很难说。

【参考方案4】：

如果您使用的是 Twitter Bootstrap 3（未使用 4 检查）。您可以使用类而不是 id。

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

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

在上述情况下轮播同步。然后在控件中使用 href=".carousel-sync"。它会在各个方向发挥作用。