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

Question

我使用的是普通的 Bootstrap 模板，主页上有这个 slider 。因为它很简单，所以我想给它添加淡入淡出效果……我做到了…… 我只是将这段代码添加到我的 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;
    }

然后我将轮播的类别更改为轮播淡入淡出。对我来说幸运的是这有效。我有淡入淡出效果，但用于切换下一张和上一张幻灯片的控件(箭头)突然消失了。我很长一段时间都感到困惑，我不明白一个简单的淡入淡出效果如何使 slider 的控件消失。从技术上讲，它们在那里，但不知何故它们是不可见的。这也是我的 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

将这个类添加到你的 CSS 中，

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

发生这种情况是因为您为您的 .carousel.fade .item.active 类提供了 z-index:2。所以 slider 图像出现在控件之上。

编辑:

您必须像这样更改 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>