Bootstrap Carousel: How To Fade Transition Instead of Slide

The Bootstrap carousels we have seen in the last articles and tutorials, had all a “slide effect” when moving from one slide to the next.

But what if we want a different type of transition, like for example a “fade transition”? Can we do it?

The answer is “Yes”, and it can be done very easily. We’ll see it in today’s tutorial. Let’s begin!

1. Introduction

In this tutorial we’ll use the Bootstrap carousel component, and version 4.3.1 of the Bootstrap framework.

Also, our resulting carousel will have a button to pause or stop the autoplay function as we saw here.

2. The HTML

So, after the introduction let’s change the transition of our carousel.

As specified here to use the fade transition instead of the slide transition is very easy, just add the class “carousel-fade” to the carousel’s first “div”.

You can see it better in the HTML code (file “index.html”):

<div id="carousel-example" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example" data-slide-to="1"></li>
        <li data-target="#carousel-example" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="assets/img/backgrounds/1.jpg" class="d-block w-100" alt="img1">
            <div class="carousel-caption">
                <h1>Carousel Template with Bootstrap 4</h1>
                <div class="description">
                    <p>
                        This is a free Carousel template made with the Bootstrap 4 framework. 
                        Click on the button below to stop / start the autoplay:
                    </p>
                </div>
                <div class="pause-cycle-button">
                    <button type="button" class="btn btn-primary btn-customized">
                        <i class="fas fa-pause"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <img src="assets/img/backgrounds/2.jpg" class="d-block w-100" alt="img2">
            <div class="carousel-caption">
                <h1>This is Slide 2 of our Carousel</h1>
                <div class="description">
                    <p>
                        You can download this free template on <a href="https://azmind.com" target="_blank">AZMIND</a>.
                    </p>
                </div>
                <div class="pause-cycle-button">
                    <button type="button" class="btn btn-primary btn-customized">
                        <i class="fas fa-pause"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <img src="assets/img/backgrounds/3.jpg" class="d-block w-100" alt="img3">
            <div class="carousel-caption">
                <h1>This is Slide 3, the Last One</h1>
                <div class="description">
                    <p>
                        After you download it, you can customize and use it as you like. That's great!
                    </p>
                </div>
                <div class="pause-cycle-button">
                    <button type="button" class="btn btn-primary btn-customized">
                        <i class="fas fa-pause"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carousel-example" 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="#carousel-example" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

3. The CSS and JavaScript

Obviously we also use some CSS and JavaScript code to style the carousel and make it work as we like it.

I’m not showing this code here to keep the tutorial short, but you can find the CSS code in the files “style.css” and “media-queries.css” in the folder “assets/css”, and the JavaScript (jQuery) code in the file “scripts.js”, folder “assets/js”.

4. Demo, Download and License

VIEW DEMO

DOWNLOAD: Bootstrap Carousel Fade Transition (4373 downloads )

LICENSE:

You can use this template in personal and commercial projects, but you can’t sell or distribute it directly, “as is”. If you plan to use it, a link to this page or any form of spreading the word will be much appreciated.

You might also like: Bootstrap 4 Carousel with Multiple Items – How To Create It?

5. Conclusion

As we saw, changing the transition effect of our Bootstrap carousel to fade instead of slide, is very easy and it can be done just by adding a simple attribute in the HTML code.

Now, download the template, make your own experiments and let me know in the comments if you have any question.