Bootstrap传送带:如何同时滑动两个传送带滑块? [英] 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:链接

JSFiddle: Link

推荐答案

为避免这种延迟，您可以同时手动启动两个转盘，并对事件使用自定义的处理方式.

To avoid this delay, you could manually launch both carousels at the same time, and use customized treatments for events.

• 同步初始化
• 两个转盘上的简单启动事件
• 悬停时暂停(我想念您不需要它)

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

• 不同步的初始化
• 两个轮播中的事件一旦发生就会重复
• 悬停时不暂停

$('.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类，以避免无限循环.

Please not the .sliding class is necessary, to avoid an infinite loop.

引导示例

Bootply example

这篇关于Bootstrap传送带:如何同时滑动两个传送带滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！