javascript - bootstrap Carousel淡入淡出显示问题

Question

请原谅我的拙劣画作。

如下图所示。我正在使用一个 Bootstrap Carousel 控件，它是从

中引用的

http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

在控件中我将轮播设置为

<div class="carousel carousel-fade slide home-slider....>
....
</div>

这样就可以实现滑动时的淡入淡出效果。

我通过制作 "style='margin-top:-40px'"

使“前部元素”(红色)位于旋转木马的顶部

我的问题是，每次触发滑动动画时，前面的元素也会出现这种淡入/淡出效果，这是不可取的。

如何在保持背景轮播效果的同时使前面的元素不闪烁。这可能吗？

谢谢

Answer 1

使用 position:relative 创建一个自定义容器 div 并将 Carousel 放入容器中，然后将 Front 元素设置为 position: absolute 并将其放入容器中走出旋转木马。所以 Front 元素的位置在最后一个 Carousel 关闭标签之后和容器关闭标签之前。结构:

<div clas="container" style="position:relative">
[Carousel]
<fronElement style="position: absolute;bottom:40px" ></frontElement>
</div>