扩展于这个答案对于另一个问题,如果您将以下 css 添加到代码中,它将提供您正在寻找的效果。
我们基本上必须扩展.carousel-inner
大于.carousel
,然后将其居中并隐藏溢出.carousel
.
为了获得不透明效果,我们扩大了上一个和下一个箭头容器的大小,然后设置半透明的白色背景。
引导程序 >= 3.3.0
在 Bootstrap 版本 3.3.0 中CSS 发生了变化,导致之前的方法失效。所以这是目前的方法。
(Demo)
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left,
.carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}
引导
(Demo)
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner .active.left {
left: -33%;
}
.carousel-inner .next {
left: 33%;
}
.carousel-inner .prev {
left: -33%;
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}