Carousels
CoreUI PRO hexagon
Our Admin Panel isn’t just a mix of third-party components. It’s the only Next.js dashboard built on a professional, enterprise-grade UI Components Library. This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
Carousel Slide only

Here’s a carousel with slides

Carousel With controls

Adding in the previous and next controls by controls property.

Carousel With indicators

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

Carousel With captions

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.

Carousel Crossfade

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

Carousel Dark variant

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.