The fade transition I added to my Bootstrap 4 carousel isn't working properly. It seems like the effect is not being applied to the carousel.
Here is the HTML code snippet:
<div id="testimonialsSlides" class="carousel carousel-fade" data-ride="false" data-interval="5000">
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<div class="study-text">
<p>“This is test 1”</p>
</div>
<div class="clearfix"></div>
</div>
<div class="carousel-item">
<div class="study-text">
<p>“This is test 2”</p>
</div>
<div class="clearfix"></div>
</div>
<div class="carousel-item active">
<div class="study-text">
<p>“This is test 3”</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="arrows-wrap">
<a class="prev" href="#testimonialsSlides" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="next" href="#testimonialsSlides" role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Check out the CSS code below:
.carousel-fade .carousel-item {
opacity: 0;
transition: opacity .75s ease-in-out;
}
.carousel-fade .carousel-item.active {
opacity: 1;
}
I'm puzzled about why the fading transition isn't working as expected. Any insights on this issue would be greatly appreciated!
Take a look at the demo here: http://jsfiddle.net/yv80533m/23