我使用普通的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>
答案 0 :(得分: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>