Bootstrap 5 Carousel Individual .carousel-item interval
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.
HTML
<!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.
HTML
<!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
Please Login to comment...