Quantum Admin | Carousel

Basic example

Here is a basic example of a carousel with three slides. We recommend using <button> elements, but you can also use <a> elements with role="button".

Indicators

You can add indicators to the carousel, alongside the previous/next controls. The indicators let users jump directly to a particular slide.

Captions

You can add captions to your slides with the .carousel-caption element within any .carousel-item.

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

Crossfade

Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may want to add .bg-body or some custom CSS to the .carousel-items for proper crossfading.

Autoplaying carousels

You can make your carousels autoplay on page load by setting the ride option to carousel. Autoplaying carousels automatically pause while hovered with the mouse.