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

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.

Show code

        
            
          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.

Show code

        
            
            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:

Show code

        
            
            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.

Show code

        
            
            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.

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.

Show code

        
            
            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.

Show code

        
            
            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.

Show code

        
            
            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.

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.

Show code

        
            
            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.

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.

Show code

        
            
            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.

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.

Show code

        
            
          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

Show code

        
            
          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

Show code

javascript

        
            
        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.

Carousel

React Bootstrap 5 Carousel component

Basic example

First slide label

Second slide label

Third slide label

How it works

Variations

Slides only

With controls

With indicators

With captions

First slide label

Second slide label

Third slide label

Crossfade

MDBCarousel interval

Disable touch swiping

First slide label

Second slide label

Third slide label

Material style

First slide label

Second slide label

Third slide label

Dark variant

First slide label

Second slide label

Third slide label

Multi-item carousel

Related resources

Carousel - API

Import

Properties

MDBCarousel

MDBCarouselItem

Events

`MDBCarousel` interval