React Bootstrap Carousel

React Carousel - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

React Bootstrap carousel is responsive and interactive slideshow which is created for presenting content, especially images and videos.

The carousel is a slideshow for cycling through a series of content. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.

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. 

        
            
          import React from "react";
          import { 
            MDBCarousel, 
            MDBCarouselInner, 
            MDBCarouselItem, 
            MDBView, 
            MDBContainer 
          } from "mdbreact";

          const CarouselPage = () => {
            return (
              <MDBContainer>
                <MDBCarousel
                  activeItem={1}
                  length={3}
                  showControls={false}
                  showIndicators={false}
                  className="z-depth-1"
                  slide
                >
                  <MDBCarouselInner>
                    <MDBCarouselItem itemId="1">
                      <MDBView>
                        <img
                          className="d-block w-100"
                          src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).webp"
                          alt="First slide"
                        />
                      </MDBView>
                    </MDBCarouselItem>
                    <MDBCarouselItem itemId="2">
                      <MDBView>
                        <img
                          className="d-block w-100"
                          src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).webp"
                          alt="Second slide"
                        />
                      </MDBView>
                    </MDBCarouselItem>
                    <MDBCarouselItem itemId="3">
                      <MDBView>
                        <img
                          className="d-block w-100"
                          src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).webp"
                          alt="Third slide"
                        />
                      </MDBView>
                    </MDBCarouselItem>
                  </MDBCarouselInner>
                </MDBCarousel>
              </MDBContainer>
            );
          }

          export default CarouselPage;

With controls

Adding in the previous and next controls: 

        
            
          import React from "react";
          import { 
            MDBCarousel, 
            MDBCarouselInner, 
            MDBCarouselItem, 
            MDBView, 
            MDBContainer 
          } from "mdbreact";

          const CarouselPage = () => {
            return (
              <MDBContainer>
                <MDBCarousel
                  activeItem={1}
                  length={3}
                  showControls={true}
                  showIndicators={false}
                  className="z-depth-1"
                  slide
                >
                  <MDBCarouselInner>
                    <MDBCarouselItem itemId="1">
                      <MDBView>
                        <img
                          className="d-block w-100"
                          src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).webp"
                          alt="First slide"
                        />
                      </MDBView>
                    </MDBCarouselItem>
                    <MDBCarouselItem itemId="2">
                      <MDBView>
                        <img
                          className="d-block w-100"
                          src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).webp"
                          alt="Second slide"
                        />
                      </MDBView>
                    </MDBCarouselItem>
                    <MDBCarouselItem itemId="3">
                      <MDBView>
                        <img
                          className="d-block w-100"
                          src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).webp"
                          alt="Third slide"
                        />
                      </MDBView>
                    </MDBCarouselItem>
                  </MDBCarouselInner>
                </MDBCarousel>
              </MDBContainer>
            );
          }

          export default CarouselPage;

With indicators

You can also add the indicators to the carousel, alongside the controls, too.

        
            
          import React from "react";
          import { 
            MDBCarousel, 
            MDBCarouselInner, 
            MDBCarouselItem, 
            MDBView, 
            MDBContainer 
          } from "mdbreact";

          const CarouselPage = () => {
            return (
              <MDBContainer>
                <MDBCarousel
                  activeItem={1}
                  length={3}
                  showControls={true}
                  showIndicators={true}
                  className="z-depth-1"
                >
                  <MDBCarouselInner>
                    <MDBCarouselItem itemId="1">
                      <MDBView>
                        <img
                          className="d-block w-100"
                          src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).webp"
                          alt="First slide"
                        />
                      </MDBView>
                    </MDBCarouselItem>
                    <MDBCarouselItem itemId="2">
                      <MDBView>
                        <img
                          className="d-block w-100"
                          src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).webp"
                          alt="Second slide"
                        />
                      </MDBView>
                    </MDBCarouselItem>
                    <MDBCarouselItem itemId="3">
                      <MDBView>
                        <img
                          className="d-block w-100"
                          src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).webp"
                          alt="Third slide"
                        />
                      </MDBView>
                    </MDBCarouselItem>
                  </MDBCarouselInner>
                </MDBCarousel>
              </MDBContainer>
            );
          }

          export default CarouselPage;

With captions

You can also add the captions to the carousel items.

If your content is not visible enough, you can cover the image with a darker mask.

You can easily change the intensity and color of the mask. To learn more read our MASKS documentation.

        
            
          import React from "react";
          import { 
            MDBCarousel, 
            MDBCarouselInner, 
            MDBCarouselItem, 
            MDBView, 
            MDBContainer 
          } from "mdbreact";

          const CarouselPage = () => {
            return (
              <MDBContainer>
                <MDBCarousel
                activeItem={1}
                length={3}
                showControls={true}
                showIndicators={true}
                className="z-depth-1"
              >
                <MDBCarouselInner>
                  <MDBCarouselItem itemId="1">
                    <MDBView>
                      <img
                        className="d-block w-100"
                        src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).webp"
                        alt="First slide"
                      />
                    <MDBMask overlay="black-light" />
                    </MDBView>
                    <MDBCarouselCaption>
                      <h3 className="h3-responsive">Light mask</h3>
                      <p>First text</p>
                    </MDBCarouselCaption>
                  </MDBCarouselItem>
                  <MDBCarouselItem itemId="2">
                    <MDBView>
                      <img
                        className="d-block w-100"
                        src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).webp"
                        alt="Second slide"
                      />
                    <MDBMask overlay="black-strong" />
                    </MDBView>
                    <MDBCarouselCaption>
                      <h3 className="h3-responsive">Strong mask</h3>
                      <p>Second text</p>
                    </MDBCarouselCaption>
                  </MDBCarouselItem>
                  <MDBCarouselItem itemId="3">
                    <MDBView>
                      <img
                        className="d-block w-100"
                        src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).webp"
                        alt="Third slide"
                      />
                    <MDBMask overlay="black-slight" />
                    </MDBView>
                    <MDBCarouselCaption>
                      <h3 className="h3-responsive">Slight Mast</h3>
                      <p>Third text</p>
                    </MDBCarouselCaption>
                  </MDBCarouselItem>
                </MDBCarouselInner>
              </MDBCarousel>
              </MDBContainer>
            );
          }

          export default CarouselPage;

React Carousel - API

In this section you will find advanced information about the Carousel component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Carousel import statement

In order to use Carousel component make sure you have imported proper module first.

        
            
          import { MDBCarousel, MDBCarouselCaption, MDBCarouselInner, MDBCarouselItem } from "mdbreact";

The table below shows the configuration options of the MDBCarousel component.

Name Type Default Description Example
activeItem Number The index of default active item <MDBCarousel activeItem={1} ... />
className String Adds custom classes <MDBCarousel className="myClass" ... />
mobileGesture Boolean true Switches on/off carousel mobile gesture. <MDBCarousel mobileGesture={false} ... />
multiItem Boolean false Switches multiItem mode - more items in one view, changed controls <MDBCarousel multiItem={true} ... />
thumbnails Boolean false Replaces simple dot indicators with miniature slides pictures <MDBCarousel thumbnails ... />
interval Number 6000 Time in milliseconds between slides changes <MDBCarousel interval={10000} ... />
testimonial Boolean false Sets black, bigger control arrows for testimonial carousels <MDBCarousel testimonial ... />
length Number Idicates amount of slides in the carousel <MDBCarousel length={5} ... />
onHoverStop Boolean True Stops the changing slide when mouse is on the element of the carousel <MDBCarousel onHoverStop={false} ... />
showControls Boolean true Switches on/off carousel controls <MDBCarousel showControls={false} ... />
showIndicators Boolean true Switches on/off carousel indicators <MDBCarousel showIndicators={false} ... />
slide Boolean false Switches slide styles of carousel <MDBCarousel slide ... />

API Reference: CarouselCaption Properties

The table below shows the configuration options of the MDBCarouselCaption component.

Name Type Default Description Example
className String Adds custom classes <MDBCarouselCaption className="customClass" ... />

API Reference: CarouselInner Properties

The table below shows the configuration options of the MDBCarouselInner component.

Name Type Default Description Example
className String Adds custom classes <MDBCarouselInner className={customClass} ... />

API Reference: CarouselItem Properties

The table below shows the configuration options of the MDBCarouselItem component.

Name Type Default Description Example
itemId Number The index of item in carousel <MDBCarouselInner itemId={1} ... />
className String Adds custom classes <MDBCarouselInner className="customClass" ... />

React Carousel - examples & customization

Quickly get a project started with any of our examples.