VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-carousel-crossfade/

⇱ Bootstrap 5 Carousel Crossfade - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Carousel Crossfade

Last Updated : 30 Jul, 2024

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

Comment

Explore