Carousel

Bootstrap 5 Carousel component

Responsive carousel built with the latest Bootstrap 5. Carousel is a slideshow cycling through different elements such as photos, videos, or text. Many examples and easy tutorials.

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Note: Read the API tab to find all available options and advanced customization

Required ES init: Carousel *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.
MDB 5 - Bootstrap 5 & Material Design Buttons Tutorial

Video tutorial

Basic example

Carousel allows to navigate through a collection of images in a sequential fashion, moving to the previous/next one through the arrows on the sides.

Show code

How it works

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

Note: Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.

Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.

The .active class needs to be added to one of the slides otherwise the carousel will not be visible. Also be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-mdb-target attribute (or href for links) that matches the id of the .carousel element.

Variations

Slides only

Here’s a carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.

Show code

With controls

Adding in the previous and next controls:

Show code

With indicators

You can also add the indicators to the carousel, alongside the controls, too.

Show code

With captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

Show code

Crossfade

Use fade transition on your slides easily by adding the .carousel-fade class to any .carousel.

Show code

Disable touch swiping

Swiping left/right on touchscreen devices can be disabled by setting the mdb-data-touch attribute to false.

Show code

Material style

If you want to make your carousel look more "material" use the rounded-* and shadow-* classes to add rounded corners and a shadows.

Show code

Dark variant

Add .carousel-dark to the .carousel for darker controls, indicators, and captions. Controls are inverted compared to their default white fill with the filter CSS property. Captions and controls have additional Sass variables that customize the color and background-color.

Show code