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.
<!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:
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
- Carousel With controls
- Carousel With indicators