--- title: Carousel summary: A carousel is used to display multiple pieces of visual content without taking up too much space. It eliminates the need to scroll down the page to see all content and is a popular method of presenting marketing information. description: Display visual content with a carousel. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import CodeDocs from '@components/CodeDocs.astro'; ## 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 for 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.

An example of adding 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. Below the `md` responsive breakpoint, the captions on the following example will be hidden as they have the `d-none` class applied to them.