我在单页上有三个旋转木马滑块,我希望它们同时移动其中两个滑块.两者都应该同时更改滑块图像.两者都有相同数量的图像/幻灯片.这是我正在使用的代码：
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
解决方法
为避免此延迟,您可以同时手动启动两个轮播,并使用自定义的事件处理方法.
选项1 ：
> Syncronized init
>两个转盘上的简单发布活动
>暂停时悬停(我想念你不需要它)
$('.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类是必要的,以避免无限循环.
