Carousel
Slides Only
Use slide class to set carousel with slides. Note
the presence of the d-block and w-100 class on
carousel images to prevent browser default image alignment.
With Controls
Use carousel-control-prev and
carousel-control-next class with <button> or <a> tag
element to show carousel with control navigation.
with Indicators
Use carousel-indicators class with <ol>
element to show carousel with indicators.
with Captions
Use carousel-caption class to add captions to the
carousel.
Crossfade Animation
Use carousel-fade class to the carousel to
animate slides with a fade transition instead of a slide.
Individual carousel-item Interval
Use data-bs-interval=" " to a carousel-item to
change the amount of time to delay between automatically cycling to the next
item.
Disable Touch Swiping
Carousels support swiping left/right on touchscreen devices to
move between slides.
This can be disabled using the data-bs-touch attribute. The example
below also does not include the
data-bs-ride attribute and has
data-bs-interval="false" so it doesn’t autoplay.
Dark Variant
Use carousel-dark class to the carousel for
darker controls, indicators, and captions.