The active
class needs to be added to one of the slides otherwise the carousel will not be visible. d-block
and w-100
on carousel images to prevent browser default image alignment.
Use carousel-control-prev
& carousel-control-next
through previous and next controls. We recommend using <button>
elements, but you can also use <a>
elements with role="button".
Use carousel-indicators
through carousel indicates.
Add captions to your slides easily with the carousel-caption
element within any carousel-item
.
Add carousel-fade
to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content.
Add data-bs-interval=""
to a carousel-item
to change the amount of time to delay between automatically cycling to the next item.
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the data-bs-touch
attribute.
Add carousel-dark
to the carousel
for darker controls, indicators, and captions.
Height of image can be set by adding vertical-sweeper
& sweeper-h
classes and images will be swept vertically.
Height of image can be set by adding nested-horizontal-swiper
& sweeper-h
classes and images will be swept vertically & horizontally.
Height of image can be set by adding mouseweel-swiper
& sweeper-h
classes and images will be swept through mouseweel.
Height of image can be set by adding autoplay-swiper
& sweeper-h
classes and images will be swept autoplay.
Height of image can be set by adding coverflow-slider
class and images will be swept 3D way.