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.

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.

Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/carousel/#individual-carousel-item-interval