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

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

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 ：

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

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

 
 ... 
 
 ...  

Bootply示例

选项＃2

• 去同步初始化
• 一旦发生转盘，就会在两个转盘上发生重复事件
• hover时没有暂停

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

 
 ... 
 
 ...  

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

Bootply示例

Answer 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/

Answer 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”的情况添加后备。