Carousel

A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.

Default markup

Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.

Dots indicators

You can replace the standard indicators with dots. Just add the carousel-indicators-dot class to your carousel:

Thumb indicators

The syntax is similar with thumbnails. Add class carousel-indicators-thumb and add background-image to element [data-bs-target]. Default thumbnails have an aspect ratio of 1:1. To change this use ratio utils.

Vertical indicators

To make the indicators go to the right side, add the carousel-indicators-vertical class. You can combine it with other classes that are responsible for dots or thumbnails.

Likewise, you can add thumbnails on the right side:

Carousel with captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. To make the text more readable on the image you can add carousel-caption-background which will add a black overlay over the image.