为了避免这种延迟,您可以同时手动启动两个轮播,并对事件使用自定义处理。
选项1 :
- 同步初始化
- 两个轮播上的简单启动事件
- 悬停时暂停(我错过了你不需要它)
$('.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 示例
选项#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
类是必要的,以避免无限循环。
Bootply 示例