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 =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
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 =
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 =
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 =
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