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>
              );
            }
         
        
    

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, MDBCarouselCaption } 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='...' />
                    <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/new/slides/042.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/new/slides/043.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>
              );
            }
          
        
    

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>
              );
            }
          
        
    

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>
            );
          }
     
        
    


Carousel - API


Import

        
            
        import { 
          MDBCarousel, 
          MDBCarouselItem, 
        } from 'mdb-react-ui-kit';
        
        
    

Properties


Events


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);