Rate this docs

React Bootstrap Carousel

React Carousel - Bootstrap 4 & Material Design

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.


Basic example

MDB gives you a possibility to present your images, videos, and text messages in much more eye-pleasant form by providing you with few stunning carousels. Each carousel is fully responsive and works perfectly on any device or browser.


          import React, { Component } from "react";
          import { Carousel, CarouselCaption, CarouselInner, CarouselItem, View, Mask } from "mdbreact";

          class CarouselPage extends Component {
            render() {
              return (
                <Carousel activeItem={1} length={4} showControls={true} showIndicators={true} className="z-depth-1">
                  <CarouselInner>
                    <CarouselItem itemId="1">
                      <View>
                        <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide" />
                        <Mask overlay="black-light" />
                      </View>
                      <CarouselCaption>
                        <h3 className="h3-responsive">Light mask</h3>
                        <p>First text</p>
                      </CarouselCaption>
                    </CarouselItem>
                    <CarouselItem itemId="2">
                      <View>
                        <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg" alt="Second slide" />
                        <Mask overlay="black-strong" />
                      </View>
                      <CarouselCaption>
                        <h3 className="h3-responsive">Strong mask</h3>
                        <p>Second text</p>
                      </CarouselCaption>
                    </CarouselItem>
                    <CarouselItem itemId="3">
                      <View>
                        <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide" />
                        <Mask overlay="black-slight" />
                      </View>
                      <CarouselCaption>
                        <h3 className="h3-responsive">Slight mask</h3>
                        <p>Third text</p>
                      </CarouselCaption>
                    </CarouselItem>
                    <CarouselItem itemId="4">
                      <View>
                        <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20%28143%29.jpg" alt="Mattonit's item" />
                        <Mask overlay="black-light" />
                      </View>
                      <CarouselCaption>
                        <h3 className="h3-responsive">Sopot Beach</h3>
                        <p>Taken june 21th by @mattonit</p>
                      </CarouselCaption>
                    </CarouselItem>
                  </CarouselInner>
                </Carousel>
              );
            }
          }

          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" ... />
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} ... />
showControls Boolean true Switches on/off carousel controls <MDBCarousel showControls={false} ... />
showIndicators Boolean true Switches on/off carousel indicators <MDBCarousel showIndicators={false} ... />

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.