How to Create Carousel with Multiple Items & Rounded Image in Bootstrap ?

Last Updated : 29 Apr, 2024

In Bootstrap, a carousel presents dynamic image slideshows or content showcases. Crafting a carousel with multiple items and rounded images in Bootstrap 5 involves tailoring the carousel layout and styling images with rounded edges for a visually appealing presentation.

Approach

Create an HTML file and include the necessary Bootstrap CSS and JavaScript.
Create the Carousel Structure:
- The carousel class defines the div as a carousel component.
- The carousel-inner class wraps the slides (carousel items).
- Each carousel-item represents a single slide. The first item should have the active class to indicate it as the initial active slide.
- Use <img> tags inside each carousel-item to display images. You can also use other content types, such as text or HTML elements.
- The carousel-control-prev and carousel-control-next classes create the previous and next buttons, respectively.
Simply by adding the border-radius to the image of carousel will make it rounded.
- Bootstrap 5 also have five different sizes of rounded corners that are pre-defined i.e. rounded-1, rounded-2, etc. but applying that in carousel doesn’t gives a deep rounded effect.

Example: This example illustrates the above mentioned approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
    <!-- Bootstrap CSS -->
    <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%;
            border-radius: 55px;
        }
    </style>
</head>

<body>
    <!-- Header -->
    <h1 class="text-success text-center">
        Rounded Image Carousel in Bootstrap
      </h1>

    <!-- Carousel -->
    <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://media.geeksforgeeks.org/wp-content/uploads/20240311051456/js-min.jpg"
                    class="d-block img-h w-100" 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>

    <!-- Bootstrap JavaScript Bundle with Popper -->
    <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>