twitter-bootstrap Bootstrap 中的轮播动画效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42312052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
carousel animations effects in bootstrap
提问by prasad
Is there any other default animation can we add in Bootstrap carousel other that slide. In <div id="myCarousel" class="carousel slide" data-ride="carousel">I don't want the sliding effect is there any other effect we can add without writing any extra code or animation effect.
我们可以在 Bootstrap carousel 中添加任何其他默认动画吗？在<div id="myCarousel" class="carousel slide" data-ride="carousel">我不想要滑动效果中，我们可以在不编写任何额外代码或动画效果的情况下添加任何其他效果。
回答by Nayana_Das
We can use fade effect other than slide effect, try this :
我们可以使用幻灯片效果以外的淡入淡出效果，试试这个：
CSS:
CSS：
.carousel-fade .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
HTML:
HTML：
<div id="Carousel" class="carousel slide carousel-fade col-lg-8 col-offset-2">
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="0" class="active"></li>
<li data-target="Carousel" data-slide-to="1"></li>
<li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="//placehold.it/1300x500" class="img-responsive">
</div>
<div class="item">
<img src="//placehold.it/1300x500/55EE55" class="img-responsive">
</div>
<div class="item">
<img src="//placehold.it/1300x500/CCFEFE" class="img-responsive">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
