Here’s a carousel with slides

Adding in the previous and next controls by controls property.

You can attach the indicators to the carousel, lengthwise the controls, too.

You can add captions to slides with the <CCarouselCaption> element within any <CCarouselItem>. They can be immediately hidden on smaller viewports, as shown below, with optional display utilities. We hide them with .d-none and draw them back on medium-sized devices with .d-md-block.

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the first slide.

Third slide label

Some representative placeholder content for the first slide.

Add transition="crossfade" to your carousel to animate slides with a fade transition instead of a slide.

Add dark property to the CCarousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the filter CSS property. Captions and controls have additional Sass variables that customize the color and background-color.

First slide" alt="slide 1" loading="lazy" onerror="this.onerror=null,this.src='/assets/placeholder.svg'"/>

First slide label

Some representative placeholder content for the first slide.

Second slide" alt="slide 2" loading="lazy" onerror="this.onerror=null,this.src='/assets/placeholder.svg'"/>

Second slide label

Some representative placeholder content for the first slide.

Third slide" alt="slide 3" loading="lazy" onerror="this.onerror=null,this.src='/assets/placeholder.svg'"/>

Third slide label

Some representative placeholder content for the first slide.