Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Basic example
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
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.).
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.
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.
With controls
Adding in the previous and next controls:
With indicators
You can also add the indicators to the carousel, alongside the controls, too.