引导轮播:如何同时滑动两个轮播滑块

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

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>

引导示例

选项 #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 类是必需的，以避免无限循环。

引导示例

Answer 2

由于使用轮播指示器更改幻灯片后，@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"的情况添加回退。

Answer 3

抱歉，

如果我在问题中遗漏了某些内容，但如果您希望上下轮播同步，您可以挂钩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/

Answer 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"。它将在各个方向上工作。

Answer 5

如果您使用的是最新的引导程序 4 或 5。

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