Carousel
React Bootstrap 5 Carousel component
Responsive Carousel built with Bootstrap 5, React 17 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,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showIndicators showControls fade>
<MDBCarouselItem
className='w-100 d-block'
itemId={1}
src='https://mdbootstrap.com/img/Photos/Slides/img%20(15).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(22).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(23).jpg'
alt='...'
>
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</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
className='w-100 d-block'
itemId={1}
src='https://mdbootstrap.com/img/new/slides/041.jpg'
alt='...'
/>
<MDBCarouselItem
className='w-100 d-block'
itemId={2}
src='https://mdbootstrap.com/img/new/slides/042.jpg'
alt='...'
/>
<MDBCarouselItem
className='w-100 d-block'
itemId={3}
src='https://mdbootstrap.com/img/new/slides/043.jpg'
alt='...'
/>
</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
className='w-100 d-block'
itemId={1}
src='https://mdbootstrap.com/img/new/slides/041.jpg'
alt='...'
/>
<MDBCarouselItem
className='w-100 d-block'
itemId={2}
src='https://mdbootstrap.com/img/new/slides/042.jpg'
alt='...'
/>
<MDBCarouselItem
className='w-100 d-block'
itemId={3}
src='https://mdbootstrap.com/img/new/slides/043.jpg'
alt='...'
/>
</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
className='w-100 d-block'
itemId={1}
src='https://mdbootstrap.com/img/new/slides/041.jpg'
alt='...'
/>
<MDBCarouselItem
className='w-100 d-block'
itemId={2}
src='https://mdbootstrap.com/img/new/slides/042.jpg'
alt='...'
/>
<MDBCarouselItem
className='w-100 d-block'
itemId={3}
src='https://mdbootstrap.com/img/new/slides/043.jpg'
alt='...'
/>
</MDBCarousel>
);
}
With captions
Add captions to your slides easily with the
MDBCarouselCaption
element within any
MDBCarouselItem
. 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
.
import React from 'react';
import {
MDBCarousel,
MDBCarouselItem,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showControls showIndicators>
<MDBCarouselItem
className='w-100 d-block'
itemId={1}
src='https://mdbootstrap.com/img/new/slides/041.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/new/slides/042.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/new/slides/043.jpg'
alt='...'
>
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</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
className='w-100 d-block'
itemId={1}
src='https://mdbootstrap.com/img/new/slides/041.jpg'
alt='...'
/>
<MDBCarouselItem
className='w-100 d-block'
itemId={2}
src='https://mdbootstrap.com/img/new/slides/042.jpg'
alt='...'
/>
<MDBCarouselItem
className='w-100 d-block'
itemId={3}
src='https://mdbootstrap.com/img/new/slides/043.jpg'
alt='...'
/>
</MDBCarousel>
);
}
MDBCarousel
interval
Add interval
property to a MDBCarousel
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 dealy={3000}>
<MDBCarouselItem
className='w-100 d-block'
itemId={1}
src='https://mdbootstrap.com/img/new/slides/041.jpg'
alt='...'
/>
<MDBCarouselItem
className='w-100 d-block'
itemId={2}
src='https://mdbootstrap.com/img/new/slides/042.jpg'
alt='...'
/>
<MDBCarouselItem
className='w-100 d-block'
itemId={3}
src='https://mdbootstrap.com/img/new/slides/043.jpg'
alt='...'
/>
</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,
MDBCarouselInner,
MDBCarouselItem,
MDBCarouselElement,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showControls touch={false}>
<MDBCarouselInner>
<MDBCarouselItem className='active'>
<MDBCarouselElement src='https://mdbootstrap.com/img/new/slides/041.webp' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem>
<MDBCarouselElement src='https://mdbootstrap.com/img/new/slides/042.webp' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem>
<MDBCarouselElement src='https://mdbootstrap.com/img/new/slides/043.webp' alt='...' />
</MDBCarouselItem>
</MDBCarouselInner>
</MDBCarousel>
);
}
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.
import React from 'react';
import {
MDBCarousel,
MDBCarouselInner,
MDBCarouselItem,
MDBCarouselElement,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showControls>
<MDBCarouselInner className="rounded-5 shadow-4-strong">
<MDBCarouselItem className='active'>
<MDBCarouselElement src='https://mdbootstrap.com/img/new/slides/041.webp' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem>
<MDBCarouselElement src='https://mdbootstrap.com/img/new/slides/042.webp' alt='...' />
</MDBCarouselItem>
<MDBCarouselItem>
<MDBCarouselElement src='https://mdbootstrap.com/img/new/slides/043.webp' alt='...' />
</MDBCarouselItem>
</MDBCarouselInner>
</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 |
---|---|---|---|---|
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 |
---|---|---|---|---|
captionClassName
|
string | '' |
Add custom class to MDBCarouselItem caption element. |
<MDBCarouselItem captionClassName="class" />
|
itemId
|
Number | '' |
Defines id of the MDBCarouselItem . |
<MDBCarouselItem itemId={1} />
|
src
|
string | - |
MDBCarouselItem img/video source. |
<MDBCarouselItem tag="section" />
|
video
|
boolean | false |
Set true to use as video tag. |
<MDBCarouselItem tag="section" />
|
Events
Name | Type | Description |
---|---|---|
onSlide
|
() => void |
Fires immediately when the onSlide instance method is invoked
and when the carousel has completed its slide transition.
|