CODEWITHSUNDEEP
twitter-bootstrapanimationcarousel
user7482719
user7482719

Reputation:

carousel animations effects in bootstrap

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.

Upvotes: 2

Views: 36610

Answers (1)

Nayana_Das
Nayana_Das

Reputation: 1817

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

Upvotes: 7

Related Questions