캐노피 애니메이션 효과가 부트 스트랩에 적용됨

Question

다른 기본 애니메이션이 해당 슬라이드 이외의 부트 스트랩 캐 러셀에 추가 될 수 있습니까? In <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