现在我已经实现了Twitter Bootstrap 3 Carousel,它显示了一个项目,在转换过程中显示了下一个元素,所以它看起来像：
[1] /transition/ [2] /transition/ [3] ...
[1][2] /transition/ [2][3] /transition/ [3][4] ...
甚至有可能实现吗？
我试图在页面加载时将活动类应用于两个元素,但Carousel不再起作用.使用以下CSS也不起作用：
.item.active + .item {
display: block !important;
}
解决方法
Hsz的解决方案工作正常,直到Twitter Bootstrap 3.3,其中增加了对3D转换的支持,它将覆盖转换的样式(左：50％和左：-50％)
因此,您必须使用以下css覆盖Twitter Bootstrap默认过渡样式：
@media all and (transform-3d),(-webkit-transform-3d) {
.carousel-inner > .item.next,.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(50%,0);
transform: translate3d(50%,0);
}
.carousel-inner > .item.prev,.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-50%,0);
transform: translate3d(-50%,0);
}
}
如果显示3项等,则可能需要将50％更改为33％