Bootstrap Carousel

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.


Basic example

              
                  import React, { Component } from 'react';
import  { Carousel, CarouselInner, CarouselItem, View, Container } from 'mdbreact';

class CarouselPage extends Component {
  render(){
    return(
      <Container>
        <h4 className="mt-5 mb-2">Basic example</h4>
        <Carousel
          activeItem={1}
          length={4}
          showControls={true}
          showIndicators={false}
          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" />
              </View>
            </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" />
              </View>
            </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" />
              </View>
            </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" />
              </View>
            </CarouselItem>
          </CarouselInner>
        </Carousel>
      </Container>
    );
  }
}

export default CarouselPage;

              
            

Optional captions

Add captions to your slides easily with the CarouselCaption component within any CarouselItem. Place just about any optional HTML within there and it will be automatically aligned and formatted.

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, { Component } from 'react';
                    import  {Carousel, CarouselCaption, CarouselInner, CarouselItem, View, Mask, Container } from 'mdbreact';

                    class CarouselPage extends Component {
                      render(){
                        return(
                          <Container>
                            <h4 className="mt-5 mb-2">Basic example</h4>
                            <Carousel
                              activeItem={1}
                              length={4}
                              showControls={true}
                              showIndicators={false}
                              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"></Mask>
                                  </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"></Mask>
                                  </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"></Mask>
                                  </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"></Mask>
                                  </View>
                                  <CarouselCaption>
                                    <h3 className="h3-responsive">Sopot Beach</h3>
                                    <p>Taken june 21th by @mattonit</p>
                                  </CarouselCaption>
                                </CarouselItem>
                              </CarouselInner>
                            </Carousel>
                          </Container>
                        );
                      }
                    }

                    export default CarouselPage;
                
            

Multi-item carousel MDB Pro component

              
                  import React, { Component } from 'react';
                  import { Carousel, CarouselInner, CarouselItem, Container, Row, Col, Card, CardImage, CardBody, CardTitle, CardText, Button } from 'mdbreact';

                  class MultiCarouselPage extends Component {

                    render(){
                      return(
                        <Container>
                          <h4 className="mt-5 mb-2">Multi-item Carousel</h4>
                          <Carousel
                            activeItem={1}
                            length={3}
                            slide={true}
                            showControls={true}
                            showIndicators={true}
                            multiItem >
                            <CarouselInner>
                              <Row>
                                <CarouselItem itemId="1">
                                  <Col md="4">
                                    <Card className="mb-2">
                                    <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" />
                                      <CardBody>
                                        <CardTitle>Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                        <Button color="primary">Button</Button>
                                      </CardBody>
                                    </Card>
                                  </Col>
                                  <Col md="4" className="clearfix d-none d-md-block">
                                    <Card className="mb-2">
                                    <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" />
                                      <CardBody>
                                        <CardTitle>Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                        <Button color="primary">Button</Button>
                                      </CardBody>
                                    </Card>
                                  </Col>
                                  <Col md="4" className="clearfix d-none d-md-block">
                                    <Card className="mb-2">
                                    <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" />
                                      <CardBody>
                                        <CardTitle>Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                        <Button color="primary">Button</Button>
                                      </CardBody>
                                    </Card>
                                  </Col>
                                </CarouselItem>
                                <CarouselItem itemId="2">
                                  <Col md="4">
                                    <Card className="mb-2">
                                    <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(60).jpg" />
                                      <CardBody>
                                        <CardTitle>Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                        <Button color="primary">Button</Button>
                                      </CardBody>
                                    </Card>
                                  </Col>
                                  <Col md="4" className="clearfix d-none d-md-block">
                                    <Card className="mb-2">
                                    <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg" />
                                      <CardBody>
                                        <CardTitle>Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                        <Button color="primary">Button</Button>
                                      </CardBody>
                                    </Card>
                                  </Col>
                                  <Col md="4" className="clearfix d-none d-md-block">
                                    <Card className="mb-2">
                                    <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg" />
                                      <CardBody>
                                        <CardTitle>Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                        <Button color="primary">Button</Button>
                                      </CardBody>
                                    </Card>
                                  </Col>
                                </CarouselItem>
                                <CarouselItem itemId="3">
                                  <Col md="4">
                                    <Card className="mb-2">
                                    <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(53).jpg" />
                                      <CardBody>
                                        <CardTitle>Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                        <Button color="primary">Button</Button>
                                      </CardBody>
                                    </Card>
                                  </Col>
                                  <Col md="4" className="clearfix d-none d-md-block">
                                    <Card className="mb-2">
                                    <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" />
                                      <CardBody>
                                        <CardTitle>Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                        <Button color="primary">Button</Button>
                                      </CardBody>
                                    </Card>
                                  </Col>
                                  <Col md="4" className="clearfix d-none d-md-block">
                                    <Card className="mb-2">
                                    <CardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(41).jpg" />
                                      <CardBody>
                                        <CardTitle>Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                        <Button color="primary">Button</Button>
                                      </CardBody>
                                    </Card>
                                  </Col>
                                </CarouselItem>
                              </Row>
                            </CarouselInner>
                          </Carousel>
                        </Container>
                      );
                    }
                  }

                  export default MultiCarouselPage;
              
            

Thumbnails carousel MDB Pro component

              
                  import React, { Component } from 'react';
                  import { Carousel, CarouselInner, CarouselItem, Container } from 'mdbreact';

                  class ThumbnailsCarouselPage extends Component {

                    render(){
                      return(
                        <Container>
                          <h4 className="mt-5 mb-2">Thumbnails Carousel</h4>
                          <Carousel
                            activeItem={1}
                            length={3}
                            showControls={true}
                            showIndicators={true}
                            thumbnails
                            className="z-depth-1">
                            <CarouselInner>
                              <CarouselItem itemId="1">
                                <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).jpg" alt="First slide" />
                              </CarouselItem>
                              <CarouselItem itemId="2">
                                <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).jpg" alt="Second slide" />
                              </CarouselItem>
                              <CarouselItem itemId="3">
                                <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide" />
                              </CarouselItem>
                            </CarouselInner>
                          </Carousel>
                        </Container>
                      );
                    }
                  }

                  export default ThumbnailsCarouselPage;
              
            

Video Carousel

                      
                          import React, { Component } from 'react';
                          import { Carousel, CarouselInner, CarouselItem } from 'mdbreact';

                          class CarouselPage extends Component {

                            render(){
                              return(
                                <div className="container mt-4">
                                  <div className="row">
                                    <div className="col-md-12">
                                      <Carousel
                                        activeItem={1}
                                        length={3}
                                        showControls={true}
                                        showIndicators={false}
                                        className="z-depth-1">
                                        <CarouselInner>
                                          <CarouselItem itemId="1">
                                            <video className="video-fluid d-block" autoPlay loop>
                                              <source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
                                            </video>
                                          </CarouselItem>
                                          <CarouselItem itemId="2">
                                            <video className="video-fluid d-block" autoPlay loop>
                                              <source src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4" />
                                            </video>
                                          </CarouselItem>
                                          <CarouselItem itemId="3">
                                            <video className="video-fluid d-block" autoPlay loop>
                                              <source src="https://mdbootstrap.com/img/video/Agua-natural.mp4" type="video/mp4" />
                                            </video>
                                          </CarouselItem>
                                        </CarouselInner>
                                      </Carousel>
                                    </div>
                                  </div>
                                </div>
                              );
                            }
                          }

                          export default CarouselPage;
                      
                  

Full page carousels

Click the buttons below to see a live preview.

Full Image Carousel Full Video Carousel