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 mixed with theme specific PHP:


<?php
        if ( is_front_page() || is_home() ) : ?>

        <!-- Carousel -->
        <div id="carouselBeadManRedding" class="carousel carousel-fade" data-ride="carousel" data-interval="5000">
            <ol class="carousel-indicators">
                <li data-target="#carouselBeadManRedding" data-slide-to="0" class="active"></li>
                <li data-target="#carouselBeadManRedding" data-slide-to="1"></li>
                <li data-target="#carouselBeadManRedding" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                <img class="d-block w-100" src="<?php echo $slider_one; ?>" alt="<?php echo $slider_one_alt; ?>">
                    <div class="carousel-caption d-md-block">
                    <h2><?php echo $slider_one_title; ?></h2>
                    <p class="lead"><?php echo $slider_one_text; ?></p>
                    </div>
                </div>
                <div class="carousel-item">
                <img class="d-block w-100" src="<?php echo $slider_two; ?>" alt="<?php echo $slider_two_alt; ?>">
                    <div class="carousel-caption d-md-block">
                    <h2><?php echo $slider_two_title; ?></h2>
                    <p class="lead"><?php echo $slider_two_text; ?></p>
                    </div>
                </div>
                <div class="carousel-item">
                <img class="d-block w-100" src="<?php echo $slider_three; ?>" alt="<?php echo $slider_three_alt; ?>">
                    <div class="carousel-caption d-md-block">
                    <h2><?php echo $slider_three_title; ?></h2>
                    <p class="lead"><?php echo $slider_three_text; ?></p>
                    </div>
                </div>
            </div>
        </div>
       
        <?php endif; ?>

Below is the custom CSS


/* Carousel
----------------------------------- */
#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.