Carousel
React Bootstrap 5 Carousel component
Responsive Carousel built with Bootstrap 5, React 18 and Material Design 2.0. Slider examples with indicators, captions, image and multiple item carousel.
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
Basic example
import React from 'react';
import { MDBCarousel, MDBCarouselItem, MDBCarouselCaption } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showIndicators showControls fade>
<MDBCarouselItem itemId={1}>
<img src='https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg' className='d-block w-100' alt='...' />
<MDBCarouselCaption>
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</MDBCarouselCaption>
</MDBCarouselItem>
<MDBCarouselItem itemId={2}>
<img src='https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg' className='d-block w-100' alt='...' />
<MDBCarouselCaption>
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</MDBCarouselCaption>
</MDBCarouselItem>
<MDBCarouselItem itemId={3}>
<img src='https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg' className='d-block w-100' alt='...' />
<MDBCarouselCaption>
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</MDBCarouselCaption>
</MDBCarouselItem>
</MDBCarousel>
);
}
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
MDBCarouselItem
.
Variations
Slides only
Here’s a carousel with slides only.
import React from 'react';
import { MDBCarousel, MDBCarouselItem } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel>
<MDBCarouselItem itemId={1}>
<img src='https://mdbootstrap.com/img/new/slides/041.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={2}>
<img src='https://mdbootstrap.com/img/new/slides/042.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={3}>
<img src='https://mdbootstrap.com/img/new/slides/043.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
</MDBCarousel>
);
}
With controls
Adding in the previous and next controls:
import React from 'react';
import { MDBCarousel, MDBCarouselItem } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showControls>
<MDBCarouselItem itemId={1}>
<img src='https://mdbootstrap.com/img/new/slides/041.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={2}>
<img src='https://mdbootstrap.com/img/new/slides/042.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={3}>
<img src='https://mdbootstrap.com/img/new/slides/043.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
</MDBCarousel>
);
}
With indicators
You can also add the indicators to the carousel, alongside the controls, too.
import React from 'react';
import { MDBCarousel, MDBCarouselItem } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showControls showIndicators>
<MDBCarouselItem itemId={1}>
<img src='https://mdbootstrap.com/img/new/slides/041.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={2}>
<img src='https://mdbootstrap.com/img/new/slides/042.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={3}>
<img src='https://mdbootstrap.com/img/new/slides/043.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
</MDBCarousel>
);
}
Crossfade
Add fade
property to your carousel to animate slides with a
fade transition instead of a slide.
import React from 'react';
import { MDBCarousel, MDBCarouselItem } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showControls fade>
<MDBCarouselItem itemId={1}>
<img src='https://mdbootstrap.com/img/new/slides/041.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={2}>
<img src='https://mdbootstrap.com/img/new/slides/042.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={3}>
<img src='https://mdbootstrap.com/img/new/slides/043.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
</MDBCarousel>
);
}
MDBCarousel
interval
Add interval
property to a MDBCarousel
or MDBCarouselItem
to
change the amount of time to delay between automatically cycling to the
next item.
import React from 'react';
import { MDBCarousel, MDBCarouselItem } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showControls interval={3000}>
<MDBCarouselItem itemId={1} interval={1000}>
<img src='https://mdbootstrap.com/img/new/slides/041.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={2}>
<img src='https://mdbootstrap.com/img/new/slides/042.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={3}>
<img src='https://mdbootstrap.com/img/new/slides/043.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
</MDBCarousel>
);
}
Disable touch swiping
Swiping left/right on touchscreen devices can be disabled by setting the
touch
property to false
.
import React from 'react';
import { MDBCarousel, MDBCarouselItem } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showControls showIndicators touch={false}>
<MDBCarouselItem itemId={1}>
<img src='https://mdbootstrap.com/img/new/slides/041.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={2}>
<img src='https://mdbootstrap.com/img/new/slides/042.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem itemId={3}>
<img src='https://mdbootstrap.com/img/new/slides/043.jpg' className='d-block w-100' alt='...' />
</MDBCarouselItem>
</MDBCarousel>
);
}
Dark variant
Add dark
property to the MDBCarousel
for darker
controls, indicators, and captions.
import React from 'react';
import {
MDBCarousel,
MDBCarouselItem,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showControls showIndicators dark fade>
<MDBCarouselItem
className='w-100 d-block'
itemId={1}
src='https://mdbootstrap.com/img/Photos/Slides/img%20(19).jpg'
alt='...'
>
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</MDBCarouselItem>
<MDBCarouselItem
className='w-100 d-block'
itemId={2}
src='https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg'
alt='...'
>
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</MDBCarouselItem>
<MDBCarouselItem
className='w-100 d-block'
itemId={3}
src='https://mdbootstrap.com/img/Photos/Slides/img%20(40).jpg'
alt='...'
>
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</MDBCarouselItem>
</MDBCarousel>
);
}
Multi-item carousel
A basic example of a multi carousel with the most common use case with 3 active items (default version).
If you need more advanced options and examples of multi-item carousel have a look at Multi-item Carousel Docs
import React from 'react';
import { MDBMultiCarousel, MDBMultiCarouselItem } from 'mdb-react-multi-carousel';
export default function App() {
return (
<MDBMultiCarousel>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp'
alt='Table Full of Spices'
/>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp'
alt='Winter Landscape'
/>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp'
alt='View of the City in the Mountains'
/>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp'
alt='Place Royale Bruxelles'
/>
</MDBMultiCarousel>
);
}
Carousel - API
Import
import {
MDBCarousel,
MDBCarouselItem,
} from 'mdb-react-ui-kit';
Properties
MDBCarousel
Name | Type | Default | Description | Example |
---|---|---|---|---|
carouselInnerClassName
|
string | undefined | undefined |
Add custom classes to the carousel-inner |
<MDBCarousel carouselInnerClassName="custom-class" />
|
dark
|
boolean | false |
Set dark theme. |
<MDBCarousel dark />
|
fade
|
boolean | false |
Changes the animation to fade. |
<MDBCarousel fade />
|
interval
|
number | 5000 |
The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
<MDBCarousel interval={10000} />
|
keyboard
|
boolean | false |
Whether the carousel should react to keyboard events. |
<MDBCarousel keyboard />
|
pause
|
boolean | true |
If set to true , pauses the cycling of the carousel
on mouseenter and resumes the cycling of the carousel on
mouseleave. If set to false, hovering over the carousel won't
pause it.
|
<MDBCarousel pause={false} />
|
showControls
|
boolean | false |
Adds the controls to the carousell. |
<MDBCarousel showControls />
|
showIndicators
|
boolean | false |
Adds the indicators to the carousel. |
<MDBCarousel showIndicators />
|
touch
|
boolean | true |
Whether the carousel should support left/right swipe interactions on touchscreen devices. |
<MDBCarousel touch={false} />
|
MDBCarouselItem
Name | Type | Default | Description | Example |
---|---|---|---|---|
itemId
|
Number | '' |
Defines id of the MDBCarouselItem . It must start from 1. |
<MDBCarouselItem itemId={1} />
|
interval
|
Number | undefined | undefined |
Defines individual interval time (ms) |
<MDBCarouselItem interval={5000} />
|
Events
Name | Type | Description |
---|---|---|
onSlide
|
() => void |
Fires immediately when the onSlide instance method is invoked
and when the carousel has completed its slide transition.
|
CSS variables
As part of MDB’s evolving CSS variables approach, carousel now uses local CSS variables on
.carousel-control-prev-icon, .carousel-control-next-icon
for enhanced real-time
customization. Values for the CSS variables are set via Sass, so Sass customization is still
supported, too.
--#{$prefix}carousel-control-icon-font-size: #{$carousel-control-icon-font-size};
--#{$prefix}carousel-control-icon-font-weight: #{$font-weight-bold};
SCSS variables
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: 0.5;
$carousel-control-hover-opacity: 0.9;
$carousel-control-transition: opacity 0.15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: 0.5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity 0.6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: 0.6s;
$carousel-control-prev-icon-bg: none;
$carousel-control-next-icon-bg: none;
$carousel-control-icon-font-size: 1.7rem;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);