自举中的旋转木马动画效果

Question

是否还有其他默认动画可以添加到Bootstrap其他幻灯片中。在<div id="myCarousel" class="carousel slide" data-ride="carousel"> 我不想滑动效果是否有任何其他效果，我们可以添加，而无需编写任何额外的代码或动画效果。

Answer 1

我们可以使用比滑动效果的其他淡入淡出效果，试试这个：

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：

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

查阅这些：Example1和Example2