Here’s a Bootstrap 4 Carousel with fade transition instead of a slide transition. I find carousels or sliders annoying due to the sudden and hurried transitions from slide/item to slide/item. Example shows the code for three items or slides. Excuse my echo() functions as this example is used in a WordPress theme where the Carousel renders on the front page or home page only. Edit to your specifications.
I have also included the additional CSS required to produce the fade transition effect. Also, my example includes Bootstrap captions. I do not care for captions on-top of carousel images, however, it’s demanded. So, in order to allow the text to be readable or not saturated by the background , I applied a background-color #000 to the container ID and opacity: 1; to .carousel img
It’s assumed bootstrap.css and bootstrap.jsis found in your assets directory. If not, add it of course and if you are using WordPress, add the required Bootstrap dependencies described above into your WordPress theme. How to do that is another topic. I’ll try to write about it.
Below is the HTML
<div id="carouselBeadManRedding" class="carousel carousel-fade">
<ol class="carousel-indicators">
<li class="active"> </li>
<li> </li>
<li> </li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="/add/your/image.jpg" alt="Add Alt">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="/add/your/image.jpg" alt="Alt text">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="/add/your/image.jpg" alt="Alt Text">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
</div>
</div>
Below is the custom CSS
----------------------------------- */
#carouselBeadManRedding {
background-color: #000;
}
.carousel.carousel-fade .carousel-item {
display: block;
opacity: 0;
transition: opacity ease-out 1.7s;
left: 0;
top: 0;
position: absolute;
}
.carousel.carousel-fade .carousel-item.active {
opacity: 1 !important;
}
.carousel.carousel-fade .carousel-item:first-child {
top: auto;
position: relative;
transition: opacity ease-out 1.7s;
}
.carousel.carousel-fade .carousel-item:second-child {
top: auto;
position: relative;
transition: opacity ease-out 1.7s;
}
.carousel-item .img-fluid {
margin: 0 auto;
}
.carousel img {
opacity: 0.5;
filter: alpha(opacity=50);
}
I found this post on codeply to be very useful in helping me resolve some of the trouble I was having with transition CSS. Here’s a link Codeply Bootstrap 4 Carousel Fade Transition.