1

I am using a bootstrap carousel on my website. I wanted the transition of images to fade instead of slide. and iv achieved that by doing the following.

//CSS

.carousel-wrapper
{
    position:relative;
    z-index:2;
    animation-name: opacity;

}

.carousel-fade .carousel-inner .item {
  opacity: 0.6;
  transition-property: opacity;


}
.carousel-fade .carousel-inner .active {
   transition: opacity 3s ease-in-out;
   opacity:1;


}




.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0.5;

  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="hero-wrapper ">
    <div class="carousel-wrapper">
      <div id="hero-carousel" class="carousel slide carousel-fade">

        <div class="carousel-inner">
          <div class="item active">
            <img class="img-responsive center-block" src="images/mid1.png" width="550" height="auto">
          </div>
          <div class="item">
              <img class="img-responsive center-block" src="images/mid2.png" width="550" height="auto">
          </div>
          <div class="item">
              <img class="img-responsive center-block" src="images/mid3.png" width="550" height="auto">
          </div>



        </div>

      </div>
    </div>
  </div>

However each image disappears before the other one comes in. I want it to crossfade kind of like the next image comes OVER the first one.

what am I Doing wrong?

Rushad Bhagwagar
  • 11
  • 3
  • 1
    Possible duplicate of [How can I change the sliding animation to fade in/out with transition on Bootstrap3 Carousel](http://stackoverflow.com/questions/19231678/how-can-i-change-the-sliding-animation-to-fade-in-out-with-transition-on-bootstr) – Gleb Kemarsky Aug 25 '16 at 19:48

0 Answers0