引导轮播淡入淡出显示问题答案

【问题标题】：bootstrap Carousel fade in and out display issue引导轮播淡入淡出显示问题
【发布时间】：2015-10-27 12:41:58
【问题描述】：

请看我拙劣的画。

如下图所示。我正在使用引导轮播控件，该控件来自

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

在控件中，我将轮播设置为

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

这会让它在滑动时有淡入淡出的效果。

我正在通过将其 "style='margin-top:-40px'" 设置为“前端元素”（红色）位于旋转木马的顶部

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

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

谢谢

【问题讨论】：

请在此处或 jsfiddle 中发布您的 html 和 css。
最后我所做的不是使用“carousel-fade”，而是使用“carousel-slide”，这是从我身边走来走去的......

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

用position:relative创建一个自定义容器div并将Carousel放入容器中，然后将您的Front元素设置为position: absolute并将其放入容器Out of the Carousel。所以你的 Front 元素的位置在最后一个 Carousel 封闭标签之后和容器封闭标签之前。结构：

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

【讨论】：