Bootstrap 4.0.0 Carousel fade transition

Question

There are several questions asked on Stackoverflow regarding Carousel fade transition but none of them seem to work on a default 4.0.0 implementation:

Answer 1

In bootstrap 4, you can add "carousel-fade" class like this.

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> 
....
</div>

Answer 2

Should be fixed in Bootstrap 4.1.

https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/

Answer 3

I reopened this because the question was changed from 4 Beta to 4.0.0 (stable)...

Bootstrap 4.0.0 Carousel Fade:
https://www.codeply.com/go/LhLJlldsLN

.carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: .6s;
 transition-property: opacity;
}

.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);
}

---

The fade effect was removed from the carousel during the 4.0 Beta and is also not available in 4.0.0. This pull request indicates that the fade effect will return in 4.1 or 4.2. In the meanwhile, the above CSS will work for 4.0.0