Bootstrap 4 carousel fade animation

Question

So, I try to make fade animation on Bootstrap 4.0.0 carousel. Fade animation on .active are good, but the out animation doesn't happen.

I tried the solution of this question : Bootstrap 4: Carousel Fade Transition Not Working

The difference is that I'm using backround instead of tag. What is the problem ? Thank you for your answers !

Working snippet:

.carousel.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity ease-out .7s;
}

.carousel.carousel-fade .carousel-item.active {
    opacity: 1 !important;
}

.carousel-item{
 height: 500px;
 background-repeat:no-repeat;
    background-position: center;
 background-size:cover; 
}

.slide1{
 background: green;
}

.slide2{
 background: red;
}

.slide3{
 background: yellow;
}

.slide4{
 background: purple;
}

<div id="carousel-index" class="carousel carousel-fade slide" data-ride="carousel">
 <ol class="carousel-indicators">
  <li data-target="#carousel-index" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-index" data-slide-to="1"></li>
  <li data-target="#carousel-index" data-slide-to="2"></li>
  <li data-target="#carousel-index" data-slide-to="3"></li>
 </ol>
 <div class="carousel-inner">
  <div class="carousel-item slide1 active">
   <div class="carousel-caption d-none d-md-block">
    <h3>Lorem ipsum dolor sit amet, consectetur</h3>
   </div>
  </div>
  <div class="carousel-item slide2">
   <div class="carousel-caption d-none d-md-block">
    <h3>Lorem ipsum dolor sit amet, consectetur</h3>
   </div>
  </div>
  <div class="carousel-item slide3">
   <div class="carousel-caption d-none d-md-block">
    <h3>Lorem ipsum dolor sit amet, consectetur</h3>
   </div>
  </div>
  <div class="carousel-item slide4">
   <div class="carousel-caption d-none d-md-block">
    <h3>Lorem ipsum dolor sit amet, consectetur</h3>
   </div>
  </div>
 </div>
 <a class="carousel-control-prev" href="#carousel-index" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carousel-index" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

BS 4.1 has a class for fading: https://getbootstrap.com/docs/4.1/components/carousel/#crossfade — Klooven, Apr 13 '18 at 09:29
`carousel-fade` only exists in the latest 4.1, and you're referencing v4 beta-2. You need to add the carousel-fade CSS for it to work. see: https://stackoverflow.com/a/48666153/171456 — Carol Skelly, Apr 13 '18 at 10:27
Please check **[my answer](https://stackoverflow.com/a/51683519/4512005)** and tell me if it is helpful. — Razvan Zamfir, Aug 06 '18 at 13:59

score 3 · Answer 1 · answered Aug 04 '18 at 07:35

Is this your desired result?

.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity ease-out .7s;
  height: 500px;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
  transform: translateX(0);
  transform: translate3d(0, 0, 0);
}

.slide1 {
  background: green;
}

.slide2 {
  background: red;
}

.slide3 {
  background: yellow;
}

.slide4 {
  background: purple;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<div id="carousel-index" class="carousel slide carousel-fade" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-index" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-index" data-slide-to="1"></li>
    <li data-target="#carousel-index" data-slide-to="2"></li>
    <li data-target="#carousel-index" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item slide1 active">
      <div class="carousel-caption d-none d-md-block">
        <h3>Lorem ipsum dolor sit amet, consectetur</h3>
      </div>
    </div>
    <div class="carousel-item slide2">
      <div class="carousel-caption d-none d-md-block">
        <h3>Lorem ipsum dolor sit amet, consectetur</h3>
      </div>
    </div>
    <div class="carousel-item slide3">
      <div class="carousel-caption d-none d-md-block">
        <h3>Lorem ipsum dolor sit amet, consectetur</h3>
      </div>
    </div>
    <div class="carousel-item slide4">
      <div class="carousel-caption d-none d-md-block">
        <h3>Lorem ipsum dolor sit amet, consectetur</h3>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel-index" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-index" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

You can use this carousel with the latest Bootstrap 4.

Bootstrap 4 carousel fade animation

1 Answers1