カルーセルのアニメーションの効果をブートストラップ

Question

他のデフォルトのアニメーションは、それ以外のブートストラップのカルーセルに追加できますか？ <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

を