参见英文答案 >
Bootstrap carousel multiple frames at once15个
我试图使用bootstrap创建多个项目轮播.我的问题是它将所有3个项目移动到1而不是一个.
请在此处查看演示：
我试图使用bootstrap创建多个项目轮播.我的问题是它将所有3个项目移动到1而不是一个.
请在此处查看演示：
http://plnkr.co/edit/Fl0HZaU5x5ZkPEVo87u3?p=preview
$('#myCarousel').carousel({
interval: 10000
})
console.log($('.item'))
$('.item').each(function() {
var next = $(this).next();
console.log(next);
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
解决方法
Bootstrap在3.3.0中添加了CSS3轮播转换.见
#13074
添加以下css修复它：
.carousel-inner > .item.next,.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(33%,0);
-ms-transform: translate3d(33%,0);
-o-transform: translate3d(33%,0);
transform: translate3d(33%,0);
}
.carousel-inner > .item.prev,.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%,0);
-ms-transform: translate3d(-33%,0);
-o-transform: translate3d(-33%,0);
transform: translate3d(-33%,0);
}