Bootstrap 5 Carousel Individual .carousel-item interval is used to give time intervals to individual carousel items by which the carousel items will be automatically cycled at the given intervals of time.
Bootstrap 5 Carousel Classes:
- carousel-item: This class specifies each item of the carousel.
Bootstrap 5 Carousel Attributes:
- data-bs-interval="": The duration between automatically cycling to the next item can be modified using this attribute.
Syntax:
<div class="carousel-item active"
data-bs-interval="...">
...
</div>
Example 1: The code example below demonstrates how to implement the time-delay attribute in a basic carousel without controls.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Carousel Individual
.carousel-item bg-light interval
</h4>
<div class="container mb-4 p-4">
<div id="carouselExampleSlidesOnly"
class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item bg-light active"
data-bs-interval="2000">
<h1 class="m-4 text-success" >
This is the first slide</h1>
<h4 class="ms-4">
This slide has a time delay of 2000ms</h4>
</div>
<div class="carousel-item bg-light"
data-bs-interval="4000">
<h1 class="m-4 text-danger">
This is the second slide</h1>
<h4 class="ms-4">
This slide has a time delay of 4000ms</h4>
</div>
<div class="carousel-item bg-light"
data-bs-interval="6000">
<h1 class="m-4 text-warning">
This is the third slide</h1>
<h4 class="ms-4">
This slide has a time delay of 6000ms</h4>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: The code below demonstrates how we can also add the time delay feature in a carousel with features of crossfade and controls.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks</h1>
<h4 class="ms-4">
Bootstrap 5 Carousel Individual
.carousel-item bg-dark interval
</h4>
<div class="container mb-4 p-4
text-light text-center">
<div id="carouselExample"
class="carousel slide carousel-fade"
data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item bg-dark active"
data-bs-interval="2000">
<h1 class="m-4 text-success">
This is the first slide</h1>
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png"
alt="GFG LOGO">
<h4 class="m-4">
This slide has a time delay of 2000ms</h4>
</div>
<div class="carousel-item bg-dark"
data-bs-interval="4000">
<h1 class="m-4 text-warning text-center">
This is the second slide</h1>
<div class="text-center">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG LOGO">
</div>
<h4 class="mt-3">
This slide has a time delay of 4000ms</h4>
</div>
<div class="carousel-item bg-dark"
data-bs-interval="6000">
<h1 class="m-4 text-warning">
This is the third slide</h1>
<div class="text-center">
<img src=
"https://taplink.st/a/7/d/5/4/3e0f8a.png?4" width="45%"
alt="GFG LOGO">
</div>
<h4 class="mt-3">
This slide has a time delay of 6000ms</h4>
</div>
</div>
<button class="carousel-control-prev"
type="button"
data-bs-target="#carouselExample"
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="#carouselExample"
data-bs-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/carousel/#individual-carousel-item-interval
