Bootstrap 4: Carousel Fade Transition Not Working

Question

The below code worked perfectly fine for me using Bootstrap version 3. However, since upgrading to Bootstrap 4 Beta2 the fade transition does not work. It just jumps to the next image rather than a smooth transition:

HTML

<div id="carousel1" class="carousel fade" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel1" data-slide-to="0" class="active"></li>
      <li data-target="#carousel1" data-slide-to="1"></li>
      <li data-target="#carousel1" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
      <div class="item active"><img src="images/a.jpg" alt="First slide image" class="center-block">
        <div class="carousel-caption">
          <h3>First slide Heading</h3>
          <p>First slide Caption</p>
        </div>
      </div>
      <div class="item"><img src="images/b.jpg" alt="Second slide image" class="center-block">
        <div class="carousel-caption">
          <h3>Second slide Heading</h3>
          <p>Second slide Caption</p>
        </div>
      </div>
      <div class="item"><img src="images/c.jpg" alt="Third slide image" class="center-block">
        <div class="carousel-caption">
          <h3>Third slide Heading</h3>
          <p>Third slide Caption</p>
        </div>
      </div>
    </div>

    <a class="left carousel-control" href="#carousel1" 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="#carousel1" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>

CSS

.carousel.fade {
     opacity: 1;
}
.carousel.fade .item {
    transition: opacity ease-out .7s;
    left: 0;
    opacity: 0; /* hide all slides */
    top: 0;
    position: absolute;
    width: 100%;
    display: block;
}
.carousel.fade .item:first-child {
    top: auto;
    opacity: 1; /* show first slide */
    position: relative;
}
.carousel.fade .item.active {
    opacity: 1;
}

JS

$(function(){
    $('.carousel').carousel({
      interval: 6000
    });
});

Looking around and it seems that there has been a few issues with the recent bootstrap upgrade, any help would be appreciated.

Answer 1

As you have already noticed, quite a lot of things have been changed in Bootstrap 4. Let me walk you through the approach I took with the solution below.

• .fade was renamed to .carousel-fade not to interfere with the default Bootstrap .fade class.
• .item was renamed to .carousel-item, since that is the name in Bootsrap 4 for carousel items.
• As the positioning of the slides is absolute now because of the fading effect, I added .embed-responsive embed-responsive-16by9 classes to .carousel-inner and also .embed-responsive-item to .carousel-item to preserve the height of the slide container and also to take care of the positioning of the slide items. (In case you want to use images with other aspect ratios, you should change the .embed-responsive-16by9 class. Defaults are listed here.)

So this would be my approach:

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

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

<div id="carousel-fade" class="carousel carousel-fade" data-ride="carousel" data-interval="2000">
    <ol class="carousel-indicators">
        <li data-target="#carousel-fade" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-fade" data-slide-to="1"></li>
        <li data-target="#carousel-fade" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner embed-responsive embed-responsive-16by9" role="listbox">
      <div class="carousel-item embed-responsive-item active">
        <img src="http://via.placeholder.com/1600x900/483D8B/ffffff?text=Slide%201" alt="First slide image" class="img-fluid">
        <div class="carousel-caption">
          <h3>First slide Heading</h3>
          <p>First slide Caption</p>
        </div>
      </div>

      <div class="carousel-item embed-responsive-item">
        <img src="http://via.placeholder.com/1600x900/9400D3/ffffff?text=Slide%202" alt="Second slide image" class="img-fluid">
        <div class="carousel-caption">
          <h3>Second slide Heading</h3>
          <p>Second slide Caption</p>
        </div>
      </div>

      <div class="carousel-item embed-responsive-item">
        <img src="http://via.placeholder.com/1600x900/FF1493/ffffff?text=Slide%203" alt="Third slide image" class="img-fluid">
        <div class="carousel-caption">
          <h3>Third slide Heading</h3>
          <p>Third slide Caption</p>
        </div>
      </div>
    </div>

    <a class="carousel-control-prev" href="#carousel-fade" 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-fade" 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>

Two more notes:

• You can also set the change interval via the data-interval attribute of the .carousel.
• The markup of the carousel controls have also been changed in Bootstrap 4.