我认为 bootstrap 的 carousel 插件的不同方面会产生您提到的效果。
-
活动项目有display: block，而非活动项目有display: none
这可以通过给所有项目display: block 来解决，然后使用top: 0 和left: 0 将position 设置为absolute，导致项目重叠。设置opacity: 0; 使它们默认不可见。
减：
.carousel-inner > .item {
opacity: 0;
top: 0;
left: 0;
width: 100%;
display: block;
position: absolute;
}
position: absolute 的一个问题是容器没有得到height。可以通过将第一项的position 设置为relative 来解决上述问题（它已经添加了正确的位置）。在Less代码中如下：
.carousel-inner > .item {
:first-of-type {
position:relative;
}
}
-
Bootstrap 使用translate3ds 来改变项目在空间中的位置。您将不需要这些转换，因此请重置它们。利用 Less，代码如下：
.carousel-inner > .item {
transform: translate3d(0,0,0) !important;
}
CSS 过渡是通过使用 jQuery 添加和删除 CSS 类来触发的。这些类更改之间的时间已在轮播插件代码 (Carousel.TRANSITION_DURATION = 600) 中硬编码。因此，在 600 毫秒后，一项变为活动状态（具有 .active 类）。如果您的 css transition-duration 大于 0.6 秒，这就是意外行为的原因。
CSS类变化如下：
活动项目具有类.active -> .active.left -> 无
下一项没有类 -> .next.left -> .active
所以.active.left 和.next.left 很重要（或者向后滑动时.prev.right 和.active.right）。
因为所有的图片都已经被堆叠了，你可以使用z-index属性让堆叠中的图片可见，因为我们可以同时改变opacity。您可以使用以下 Less 代码在下一张幻灯片中淡入淡出：
.carousel-inner {
> .next.left {
transition: opacity 0.6s ease-in-out;
opacity: 1;
z-index:2;
}
> .active.left {
z-index:1;
}
}
要确保控件也可见，请使用：
.carousel-control {
z-index:4;
}
综上所述，查看this demo 中的结果，它使用以下Less 代码：
.carousel-inner {
> .item {
opacity: 0;
top: 0;
left: 0;
width: 100%;
display: block;
position: absolute;
z-index:0;
transition: none;
transform: translate3d(0,0,0) !important;
&:first-of-type {
position:relative;
}
}
> .active {
opacity: 1;
z-index:3;
}
> .next.left,
> .prev.right {
transition: opacity 0.6s ease-in-out;
opacity: 1;
left: 0;
z-index:2;
}
> .active.left,
> .active.right {
z-index:1;
}
}
.carousel-control {
z-index:4;
}
上面的代码可以用Less autoprefixer plugin插件编译成CSS，命令如下：
lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' code.less
哪个输出：
.carousel-inner > .item {
opacity: 0;
top: 0;
left: 0;
width: 100%;
display: block;
position: absolute;
z-index: 0;
-webkit-transition: none;
-o-transition: none;
transition: none;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
.carousel-inner > .item:first-of-type {
position: relative;
}
.carousel-inner > .active {
opacity: 1;
z-index: 3;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
-webkit-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
opacity: 1;
left: 0;
z-index: 2;
}
.carousel-inner > .active.left,
.carousel-inner > .active.right {
z-index: 1;
}
.carousel-control {
z-index: 4;
}