Bootstrap carousel fade not working on images. Need help understanding why

Question

I'm trying to change the transition in my carousel from sliding from left to right, to fading in and out. I've found multiple resources including some answers here on SO but none see to be working for me and I don't quite understand what I'm missing. So far the only difference I see between mine and the examples i've seen is I include images in my carousel and captions. After implementing the code i found in an answer provided here: Bootstrap carousel-fade no longer working with maxcdn 3.3.bootstrap.min.css

it made no difference and continues to slide rather than fade. Here is my code, hopefully someone can help me figure out the issue.

HTML

    <!-- start -->
<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel" >
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox" >
    <div class="item active">
      <img src="images/nightscape3.png" alt="...">
      <div class="carousel-caption">
         <div class="about-name-div">
            <h1 >thin text<span>BOLD TEXT</span></h1>
            <p class="lead">THIS IS SOME TEXT</p>
         </div>
        <a class="btn btn-default" href="#about" role="button" id="aboutButton">LEARN MORE ABOUT US</a>
      </div>
    </div>
    <div class="item">
      <img src="images/tech.jpg" alt="...">
      <div class="carousel-caption">
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>   
</div>
<!-- end -->

CSS

.carousel-fade .carousel-inner .item {
  opacity: 0;
  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;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

Please also see: http://bassjobsen.weblogs.fm/change-bootstraps-carousel-animantion/ — Bass Jobsen, Dec 23 '14 at 21:40
@BassJobsen thanks for that link its gonna help when i want to do other css things! I figured my problem out, i had accidentally commented out a closing bracket in another css component and thats why it wasnt registering. such a simple error :/ — coderasd, Dec 24 '14 at 00:24

score 1 · Accepted Answer · edited May 23 '17 at 12:29

I think that you also should take the position (left) of your .item's into account. I also have add an additional class (.anim) to the <div class="carousel-inner" role="listbox" > instead of the wrapper with the .carousel class.

Then you should be able to use the CSS code like that shown below:

@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}

@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.carousel-inner.anim > .item {
  left: 0;
}

.carousel-inner.anim > .next,
.carousel-inner.anim > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner.anim > .next.left {

  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration:0.6s;
          animation-duration:0.6s;


}
.carousel-inner.anim > .prev.right {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration:0.6s;
          animation-duration:0.6s;


}
.carousel-inner.anim > .active.left {
    -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
  -webkit-animation-duration:0.6s;
          animation-duration:0.6s;


}
.carousel-inner.anim > .active.right {
        -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
  -webkit-animation-duration:0.6s;
          animation-duration:0.6s;

}

The above works for v3.2. Demo: http://www.bootply.com/7scRiubjja

Since v3.3 the Less/CSS code for the carousel has been changed. The transitions and transformation are wrapped inside the @media all and (transform-3d), (-webkit-transform-3d) {}

To use the above for v3.3+ you should rewrite your code with the above media query, or reset the original code. The original code can be reset with the following CSS code:

.carousel-inner > .item {
  -webkit-transition: none;
          transition: none;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: none;
            transition: none;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000;
            perspective: 1000;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    left: 0;
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    left: 0;
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    left: 0;
  }
}

Demo: http://www.bootply.com/PHBjOgJlIt

Based on the answer given here Bootstrap carousel-fade no longer working with maxcdn 3.3.bootstrap.min.css you can also reset with:

.carousel-inner.anim > .item {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
}

Bootstrap carousel fade not working on images. Need help understanding why

1 Answers1