对旋转木马实施淡入淡出效果后控件消失

Question

我使用的是普通 Bootstrap 模板，主页上有这个滑块。因为它很简单，所以我想给它添加淡入淡出效果……我做到了…… 我只是将此代码添加到我的 CSS

.carousel.fade {
opacity: 1; }

  .carousel.fade .item {
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    left: 0 !important;
    opacity: 0;
    top: 0;
    position: absolute;
    width: 100%;
    display: block !important;
    z-index: 1;
}

    .carousel.fade .item:first-child {
        top: auto;
        position: relative;
    }

    .carousel.fade .item.active {
        opacity: 1;
        -moz-transition: opacity ease-in-out .7s;
        -o-transition: opacity ease-in-out .7s;
        -webkit-transition: opacity ease-in-out .7s;
        transition: opacity ease-in-out .7s;
        z-index: 2;
    }

然后我将轮播的 class 更改为轮播淡入淡出。对我来说幸运的是这有效。我有淡入淡出效果，但用于切换下一张和上一张幻灯片的控件（箭头）突然消失了。我很长一段时间都感到困惑，我不明白一个简单的淡入淡出效果如何使滑块的控件消失。从技术上讲，它们在那里，但不知何故它们是不可见的。这是我的 HTML 代码以及

 <div id="carousel-example-generic" class="carousel fade">
                    <!-- indicators for the slider -->
                    <ol class="carousel-indicators hidden-xs">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="5"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="6"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="7"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="8"></li>
                    </ol>

                    <!-- images for the slider -->
                    <div id="carousel" class="carousel fade">
                        <div class="item active">
                            <img class="img-responsive img-full" src="img/slider8.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="img-responsive img-full" src="img/slider1.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="img-responsive img-full" src="img/slider2.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="img-responsive img-full" src="img/slider3.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="img-responsive img-full" src="img/slider4.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="img-responsive img-full" src="img/slider5.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="img-responsive img-full" src="img/slider6.jpg" alt="">
                        </div>
                        <div class="item">
                            <img class="img-responsive img-full" src="img/slider7.png" alt="">
                        </div>
                        <div class="item">
                            <img class="img-responsive img-full" src="img/slider9.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls for the slider-->
                    <a class="left carousel-control"  data-slide="prev">
                        <span class="icon-prev"></span>
                    </a>
                    <a class="right carousel-control" data-slide="next">
                        <span class="icon-next"></span>
                    </a>
                </div>

Answer 1

将此 class 添加到您的 css,

.carousel-control { z-index: 2; }

发生这种情况是因为您已经将 z-index:2 给了您的 .carousel.fade .item.active class。所以滑块图像出现在控件的顶部。

编辑：

您必须像这样更改 html 的这一部分才能使按钮正常工作

<!-- Controls for the slider-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next"></span>
</a>

对旋转木马实施淡入淡出效果后控件消失

Controls Disappear after implementing fade effect to a carousel

html

css

slider

carousel

twitter-bootstrap-3