Carousel

  1. UI Elements
  2. Carousel

Slides only

Here’s a carousel with slides only. Note the presence of the .d-blockand .img-fluidon carousel images to prevent browser default image alignment.

With controls

Adding in the previous and next controls:

With indicators

You can also add the indicators to the carousel,alongside the controls,too.

With captions

Add captions to your slides easily with the .carousel-captionelement within any .carousel-item.

Crossfade

Add .carousel-fadeto your carousel to animate slides with a fade transition instead of a slide.

Individual .carousel-item interval

Add data-bs-interval=""to a .carousel-itemto change the amount of time to delay between automatically cycling to the next item.

Dark variant

Add .carousel-darkto the .carouselfor darker controls,indicators,and captions. Controls have been inverted from their default white fill with the filterCSS property. Captions and controls have additional Sass variables that customize the colorand background-color.

© Upzet.
Crafted with By dedemao