Olá estou tentando fazer um slider com aquele efeito fade in out através do bootsttrap 4. Porém o slide simplesmente para com o efeito.

<div id="carouselExampleIndicators" class="carousel-fade" data-ride="carousel">   <ol class="carousel-indicators">     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>     <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>   </ol>   <div class="carousel-inner" role="listbox">     <div class="carousel-item active">       <img class="d-block img-fluid" src="https://via.placeholder.com/1368x800" alt="First slide">     </div>     <div class="carousel-item">       <img class="d-block img-fluid" src="https://via.placeholder.com/1368x800" alt="Second slide">     </div>     <div class="carousel-item">       <img class="d-block img-fluid" src="https://via.placeholder.com/1368x800" alt="Third slide">     </div>   </div>   <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">     <span class="carousel-control-next-icon" aria-hidden="true"></span>     <span class="sr-only">Next</span>   </a> </div> 

e no css…

.carousel-fade {     .carousel-item {         display: block;         position: absolute;         opacity: 0;         transition: opacity .75s ease-in-out;          &.active {             opacity: 1;         }     } }      html,  body,  .carousel, .carousel-inner, .carousel-item {   width: 100%;   height: 100%; }  .carousel {   position: absolute;   top: 0;   left: 0; }  .carousel-item {   &:nth-child(1) {     background-color: red;     }   &:nth-child(2) {     background-color: blue;     }   &:nth-child(3) {     background-color: yellow;     } } 

o que posso fazer?