Bootstrap class: .carousel-fade

<div id="carouselFadeExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block w-100" src="#" src="/placeholder/pictures/image.svg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="#" src="/placeholder/pictures/image.svg" alt="Second slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselFadeExampleIndicators" 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="#carouselFadeExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Preview

Check .carousel-fade in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _carousel.scss:75 */
.carousel-fade {
  .carousel-item {
    opacity: 0;
    transition-duration: .6s;
    transition-property: opacity;
  }

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

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

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

    @supports (transform-style: preserve-3d) {
      transform: translate3d(0, 0, 0);
    }
  }
}

Uses variables

/* _carousel.scss:75 */