How to Create Different Carousel Types in Bootstrap ?

Last Updated : 01 May, 2024

Bootstrap 5 Carousel is a responsive component ideal for dynamic image slideshows or content presentations. It utilizes CSS 3D transforms and JavaScript for cycling through images or custom markup, offering previous/next controls and indicators for an engaging user experience across devices.

These are the following approaches for adding a Carousel:

Table of Content

Carousel With controls
Carousel With indicators

Approach 1: Carousel With controls

In this approach, there are two controls to move the image left and right. The image height is kept consistent by setting the height of the carousel item and the image using custom CSS.
There’s a carouselExampleControls class that indicates that this <div> is a carousel container.
The carousel-inner class is applied to the <div> element inside the carousel container.
It signifies the container for carousel items (slides). The carousel-item classes are applied to each slide (<div> elements) within the carousel.
They represent the items that will be displayed in the carousel and the active class is applied to the first <div> with the class carousel-item, indicating that it is the initially active slide when the carousel loads.
carousel-control-prev and carousel-control-next classes are applied to the buttons that control navigation within the carousel. They allow users to move to the previous or next slide.

Example: This example shows the implementation of the above-explained approach.

HTML

<!doctype HTML>
<html>

<head>
    <title>HTML</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CDN link -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <style>
        .item-h {
            height: 480px
        }

        .img-h {
            height: 100%
        }
    </style>
</head>

<body>
    <div id="carouselExampleControls" class="carousel slide"
        data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active item-h">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240227040907/CSS_text_representation.png"
                    class="d-block img-h w-100" alt="...">
            </div>
            <div class="carousel-item item-h">
                <img src=
"https://cdn.statically.io/img/austingil.com/wp-content/uploads/HTML-Blog-Cover.svg?quality=100&f=auto"
                    class="d-block w-100 img-h" alt="...">
            </div>
            <div class="carousel-item item-h">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                    class="d-block w-100 img-h" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button"
                data-bs-target="#carouselExampleControls"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon btn-dark"
                aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button"
                data-bs-target="#carouselExampleControls"
            data-bs-slide="next">
            <span class="carousel-control-next-icon btn-dark"
                aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity=
"sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
        integrity=
"sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
        crossorigin="anonymous"></script>
</body>

</html>

Output:

Bootstrap 5 Carousel Example Output

Approach 2: Carousel With indicators

To add indicators and buttons to a Bootstrap Carousel, create a <div> container with ID carouselExampleIndicators and data-bs-ride=”carousel” attribute. Inside, place <div class=”carousel-item”> elements representing each slide/image. Indicators help track current position.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>codedamn HTML Playground</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- //CDN link -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous" />
    <style>
        .item-h {
            height: 480px
        }

        .img-h {
            height: 100%
        }
    </style>>
</head>

<body>
    <div id="carouselExampleIndicators"
        class="carousel slide"
        data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button"
                    data-bs-target="#carouselExampleIndicators"
                    data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button"
                    data-bs-target="#carouselExampleIndicators"
                    data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button"
                    data-bs-target="#carouselExampleIndicators"
                    data-bs-slide-to="2"
                aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active item-h">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240227040907/CSS_text_representation.png"
                    class="d-block img-h w-100" alt="..." />
            </div>
            <div class="carousel-item item-h">
                <img src=
"https://cdn.statically.io/img/austingil.com/wp-content/uploads/HTML-Blog-Cover.svg?quality=100&f=auto"
                    class="d-block w-100 img-h" alt="..." />
            </div>
            <div class="carousel-item item-h">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                    class="d-block w-100 img-h" alt="..." />
            </div>
        </div>
        <button class="carousel-control-prev" type="button"
                data-bs-target="#carouselExampleIndicators"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" 
                  aria-hidden="true">

            </span>
            <span class="visually-hidden">
                Previous
            </span>
        </button>
        <button class="carousel-control-next" 
                type="button"
                data-bs-target="#carouselExampleIndicators"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" 
                  aria-hidden="true">

            </span>
            <span class="visually-hidden">
                Next
            </span>
        </button>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity=
"sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
        integrity=
"sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
        crossorigin="anonymous"></script>
</body>

</html>