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.
HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" href= <script src= integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"> </script></head><body> <div class="container"> <h1 class="text-success"> GeeksforGeeks </h1> <h3>Carousel Crossfade</h3> <div id="GFG" class="carousel slide carousel-fade" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src= alt="Java" class="d-block w-100" height="400px"> </div> <div class="carousel-item"> <img src= alt="HTML" class="d-block w-100" height="400px"> </div> <div class="carousel-item"> <img src= alt="Angular" class="d-block w-100" height="400px"> </div> <div class="carousel-item"> <img src= alt="CSS" class="d-block w-100" height="400px"> </div> </div> <a class="carousel-control-prev" href="#GFG" data-slide="prev"> <span class="carousel-control-prev-icon"> </span> </a> <a class="carousel-control-next" href="#GFG" data-slide="next"> <span class="carousel-control-next-icon"> </span> </a> </div> </div></body></html> |
Output:
Example 2: In this example, we will make customized indicators with a crossfade.
HTML
<!DOCTYPE html><html><head> <!-- Load Bootstrap --> <link rel="stylesheet" href= integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <script src= integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"> </script></head><body> <div class="container"> <h1 class="text-success"> GeeksforGeeks </h1> <h3>Carousel Crossfade</h3> <div id="GFG" class="carousel slide carousel-fade" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#GFG" data-slide-to="0" class="active"> </li> <li data-target="#GFG" data-slide-to="1"> </li> <li data-target="#GFG" data-slide-to="2"> </li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src= width="400px" alt="Java" class="d-block w-100"> </div> <div class="carousel-item"> <img src= height="400px" width="400px" alt="HTML" class="d-block w-100"> </div> <div class="carousel-item"> <img src= height="400px" width="400px" alt="Angular" class="d-block w-100"> </div> </div> <a class="carousel-control-prev" href="#GFG" data-slide="prev"> <span class="carousel-control-prev-icon"> </span> </a> <a class="carousel-control-next" href="#GFG" data-slide="next"> <span class="carousel-control-next-icon"> </span> </a> </div> </div></body></html> |
Output:
References: https://getbootstrap.com/docs/5.0/components/carousel/#crossfade
Please Login to comment...