Carousel With indicators

Approach 1: Carousel With controls

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.w3wiki.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.w3wiki.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>

Output:

Bootstrap 5 Carousel Example Output

How to Create Different Carousel Types in Bootstrap ?

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