Bootstrap 5 Carousel Crossfade

Bootstrap 5  Carousel Crossfade is used to create a carousel animate slide show effect in Crossfade style. To make this effect, the .carousel-fade class is used.

Carousel Crossfade used Class:

• .carousel-fade: This class is used to add the fade effect in the carousel slide animation.

Syntax:

<div id="GFG" class="carousel slide carousel-fade" 
    data-bs-ride="carousel" >
    <div class="carousel-inner">
        <div class="carousel-item ">
               ...
        </div>
      </div>
</div>

Example 1: In this example, we will create a carousel slide animation with a fade effect.

Output:

 

Example 2: In this example, we will make customized indicators with a crossfade.

Output:

 

References: https://getbootstrap.com/docs/5.0/components/carousel/#crossfade