我在单页上有三个传送带滑块，我希望他们同时移动其中两个.i.e。两者都应该同时更换滑块图像。两者都具有相同数量的图像/幻灯片。这里是我使用的代码：Bootstrap传送带：如何同时滑动两个传送带滑块？

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

来源

2013-12-20 atif

这与旋转木马也许是CSS过渡做。另请参阅：http://stackoverflow.com/questions/17332431/how-can-i-control-the-speed-that-bootstrap-carousel-slides-in-items和此：http://stackoverflow.com/questions/4838972/how-to-sync-css-animations-across-multiple-elements –

为了避免这种延迟，您可以手动在同一时间启动这两个旋转木马，和使用自定义的处理事件。

选项＃1：

Syncronized初始化两个转盘
暂停悬停
简单的发布活动（我想你并不需要它）

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

没有暂停请不是.sliding类是必要的，以避免无限循环。

Bootply example

来源

2013-12-31 13:44:25 zessx

感谢您的回复，请允许我应用此功能并查看它是否适用于我。顺便说一句，我也创建了一个jsfiddle，所以你可能希望看到这个问题。 – atif

即使您提供的Bootply链接，只需在一段时间后再看看它，它的时间在一段时间后仍然不会保持不变。 – atif

我的网站上的传送带停止自动更换滑块 – atif

很抱歉，如果我错过了在这个问题的东西，但如果你想上下旋转木马同步，你可以连接的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/

来源

2014-01-07 12:26:46 geedubb

Bootstrap传送带：如何同时滑动两个传送带滑块？

回答

选项＃1：

选项＃2

相关问题