Bootstrap 5 | Carousel

05 May, 2022
Bootstrap 5 provides Carousel which is a slideshow component for cycling through elements. It can be included in the webpage using bootstrap.js or bootstrap.min.js. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect. It is built with CSS 3D transforms and a bit of JavaScript. 
Example:
HTML
<!DOCTYPE html><html><head>    <title>        Bootstrap 5 | Carousel    </title>    <!-- Load Bootstrap -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"        crossorigin="anonymous">    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">        </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"        integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"        crossorigin="anonymous">        </script></head><style>    // Customizing the carousel for white background    .carousel-indicators .active {        background-color: green;    }    .carousel-indicators li {        background-color: burlywood;    }</style><body style="text-align: center;">    <div class="container mt-3">        <h1 style="color: green;">            GeeksforGeeks        </h1>        <div id="GFG" class="carousel slide" 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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"                        alt="GFG">                </div>                <div class="carousel-item">                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190918234528/colorize1.png"                        alt="GFG">                </div>                <div class="carousel-item">                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190918234815/colorize2.png"                        alt="GFG">                </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:
Add Captions to Slides: Use .carousel-caption inside .carousel-item class is used to add caption to the slide.Example:
HTML
<!DOCTYPE html><html><head>    <title>        Bootstrap 5 | Carousel    </title>    <!-- Load Bootstrap -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"        crossorigin="anonymous">    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">        </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"        integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"        crossorigin="anonymous">        </script></head><style>    // Customizing the carousel for white background    .carousel-indicators .active {        background-color: green;    }    .carousel-indicators li {        background-color: burlywood;    }</style><body style="text-align: center;">    <div class="container mt-3">        <h1 style="color: green;">            GeeksforGeeks        </h1>        <div id="GFG" class="carousel slide"            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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"                        alt="GFG">                    <div class="carousel-caption">                        <h3 class="text-warning">                            Image 1                        </h3>                    </div>                </div>                <div class="carousel-item">                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190918234528/colorize1.png"                        alt="GFG">                    <div class="carousel-caption">                        <h3 class="text-warning">                            Image 2                        </h3>                    </div>                </div>                <div class="carousel-item">                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190918234815/colorize2.png"                        alt="GFG" />                    <div class="carousel-caption">                        <h3 class="text-warning">                            Image 3                        </h3>                    </div>                </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><!DOCTYPE html><html><head>    <title>        Bootstrap 5 | Carousel    </title>    <!-- Load Bootstrap -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"        crossorigin="anonymous">    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">        </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"        integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"        crossorigin="anonymous">        </script></head><style>    // Customizing the carousel for white background    .carousel-indicators .active {        background-color: green;    }    .carousel-indicators li {        background-color: burlywood;    }</style><body style="text-align: center;">    <div class="container mt-3">        <h1 style="color: green;">            GeeksforGeeks        </h1>        <div id="GFG" class="carousel slide"            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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"                        alt="GFG">                    <div class="carousel-caption">                        <h3 class="text-warning">                            Image 1                        </h3>                    </div>                </div>                <div class="carousel-item">                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190918234528/colorize1.png"                        alt="GFG">                    <div class="carousel-caption">                        <h3 class="text-warning">                            Image 2                        </h3>                    </div>                </div>                <div class="carousel-item">                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190918234815/colorize2.png"                        alt="GFG" />                    <div class="carousel-caption">                        <h3 class="text-warning">                            Image 3                        </h3>                    </div>                </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:
sahilintern
Bootstrap-Misc
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?