Bootstrap 5 Carousel

Add scrolling images or text to your website with the Bootstrap carousel component.

The Bootstrap carousel component enables you to add scrolling images and text that slide in, pause, then slide out. Controls enable the user to scroll forwards or backwards within the set. Basically a scrolling marquee with user controls.


To create a basic carousel:

Add Controls

To add "Previous/Next" controls, use an <a> with .carousel-control-prev or carousel-control-next. Also add a <span> with .carousel-control-prev-icon or .carousel-control-next-icon.

Also add a .data-bs-target on each control with the id of the carousel it controls.

To cater for screenreaders, add <span>s with the words "Previous" or "Next" and give them the .visually-hidden class. This will hide this text from browsers, but read out the text in screenreaders.

Add Indicators

To add "indicator" controls (the little clickable areas at the bottom, center), add a list with .carousel-indicators, as well as the applicable .data-bs-target and .data-bs-slide-to attributes.


You can add captions to your slideshow by adding a <div> with the .carousel-caption class applied. This goes inside each .carousel-item.

Bootstrap 5 includes a lot more functionality than I've included in this tutorial. See the Bootstrap documentation for more.