twitter-bootstrap Bootstrap 轮播：如何同时滑动两个轮播滑块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20710222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel: How to slide two carousel sliders at a same time?
提问by atif
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: Link
JSFiddle：链接
回答by zessx
To avoid this delay, you could manually launch both carousels at the same time, and use customized treatments for events.
为避免这种延迟，您可以同时手动启动两个轮播，并对事件使用自定义处理。
Option #1 :
选项1 ：
- Syncronized init
- Simple launch events on both carousels
- Pause on hover (I missed you didn't need it)
- 同步初始化
- 两个轮播上的简单启动事件
- 悬停时暂停（我错过了你不需要它）
$('.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>
Option #2
选项#2
- Desynchronized init
- Duplicate events on both carousels as soon as it occurs
- No pause on 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');
});
<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>
Please not the .slidingclass is necessary, to avoid an infinite loop.
请不要.sliding类是必要的，以避免无限循环。
回答by geedubb
Sorry if i have missed something in the question, but if you want the upper and lower carousels to sync, you can hook the slidevent, as opposed to the slideevent.
抱歉，如果我错过了问题中的某些内容，但是如果您希望上下轮播同步，您可以挂钩slid事件，而不是slide事件。
JS:
JS：
jQuery('#carousel-example-generic2').carousel({
pause:'false'
});
jQuery('#carousel-example-generic2').on('slid', function(){
jQuery('#carousel-example-generic1').carousel('next');
});
回答by René
Since the answer of @zessx does not work properly anymore after changing slides by using the carousel-indicators, I want to provide an extended answer based on his option #2. This extended answer will also sync slide changes triggered by clicks on carousel-indicators:
由于@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);
});
Please note that this requires the synced carousels to have the same number of slides. If it is not the case, you have to add a fallback for those cases where "goTo" does not exist for all synced carousels.
请注意，这要求同步的轮播具有相同数量的幻灯片。如果不是这种情况，您必须为所有同步轮播不存在“goTo”的情况添加回退。
回答by Meint-Willem Gaasbeek
If you are using Twitter Bootstrap 3 (didn't check with 4). You can use classes instead of id's.
如果您使用的是 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>
In the above case carousel-sync. Then in the controls you just use href=".carousel-sync". And it will work in all directions.
在上述情况下，轮播同步。然后在控件中您只需使用 href=".carousel-sync"。它将在各个方向发挥作用。
