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;
    }

然后我将旋转木马的类更改为旋转木马淡入淡出。对我来说幸运的是这个有用。我有淡入淡出效果但是我用于切换下一张和上一张幻灯片的控件（箭头）突然消失了。我很长时间都有这种困惑，我无法理解简单的淡入淡出效果如何使滑块的控制消失。从技术上讲，他们在那里，但不知怎的，他们是不可见的。这是我的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; }

之所以发生这种情况，是因为您已向z-index:2课程提供了.carousel.fade .item.active。因此滑块图像位于控件之上。

编辑：

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

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

1 个答案: