carousel animations effects in bootstrap

Question

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.

Solution

We can use fade effect other than slide effect, try this :

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>

Check out these : Example1 and Example2