Skip to content
Related Articles
Open in App
Not now

Related Articles

Bootstrap 5 Carousel Crossfade

Improve Article
Save Article
  • Last Updated : 02 Feb, 2023
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!