Add animation to bootstrap carousel elements

By default, Bootstrap carousel has no way to add animations to carousel elements. Here I’m going to show you how you can do that.

Let’s create the carousel HTML. I’ve copied the HTML from the Bootstrap’s documentation from here.

<div id="carousel-example" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/id/1042/768/300" class="d-block w-100" />
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/id/1002/768/300" class="d-block w-100" />
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some representative placeholder content for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/id/1019/768/300" class="d-block w-100" />
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some representative placeholder content for the third slide.</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carousel-example" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carousel-example" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

Bootstrap carousel adds a class .active to the visible or active slide. We’ll take advantage of that class to apply the animations. I’ve used CSS transition for the animation, but you can use CSS animation too. Here is the CSS :

.carousel-item h5 {
    transform: translateY(-40px);
    opacity: 0;
    transition: all 0.5s ease;
}

.carousel-item p {
    transform: translateY(40px);
    opacity: 0;
    transition: all 0.5s ease;
    transition-delay: 0.5s;
}

.carousel-item.active h5 {
    transform: translate(0);
    opacity: 1;
}

.carousel-item.active p {
    transform: translate(0);
    opacity: 1;
}

You can see it live here :