How to Create Carousel with Multiple Items & Rounded Image in Bootstrap ?
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.
<!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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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>
Output: