Sign in


Sign up


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

                
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.prev = this.prev.bind(this);
    this.state = {
      activeItem: 1,
      maxLength: 4
    };
  }

  next() {
    const nextItem = this.state.activeItem + 1;
    if(nextItem > this.state.maxLength) {
      this.setState({ activeItem: 1 });
    } else {
      this.setState({ activeItem: nextItem });
    }
  }

  prev() {
    const prevItem = this.state.activeItem - 1;
    if(prevItem < 1) {
      this.setState({ activeItem: this.state.maxLength });
    } else {
      this.setState({ activeItem: prevItem });
    }
  }

  goToIndex(item) {
    if (this.state.activeItem !== item) {
      this.setState({
        activeItem: item
      });
    }
  }
                
            
                
<Carousel 
  activeItem={this.state.activeItem}
  next={this.next}
  className="z-depth-1">
  <CarouselInner>
    <CarouselItem itemId="1">
      <div className="view hm-black-light">
        <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide" />
        <div className="mask"></div>
      </div>
      <CarouselCaption>
        <h3 className="h3-responsive">Light mask</h3>
        <p>First text</p>
      </CarouselCaption>
    </CarouselItem>
    <CarouselItem itemId="2">
      <div className="view hm-black-strong">
        <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg" alt="First slide" />
        <div className="mask"></div>
      </div>
      <CarouselCaption>
        <h3 className="h3-responsive">Strong mask</h3>
        <p>Second text</p>
      </CarouselCaption>
    </CarouselItem>
    <CarouselItem itemId="3">
      <div className="view hm-black-slight">
        <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="First slide" />
        <div className="mask"></div>
      </div>
      <CarouselCaption>
        <h3 className="h3-responsive">Slight mask</h3>
        <p>Third text</p>
      </CarouselCaption>
    </CarouselItem>
    <CarouselItem itemId="4">
      <div className="view hm-black-light">
        <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20%28143%29.jpg" alt="Mattonit's item" />
        <div className="mask"></div>
      </div>
      <CarouselCaption>
        <h3 className="h3-responsive">Sopot Beach</h3>
        <p>Taken june 21th by @mattonit</p>
      </CarouselCaption>
    </CarouselItem>
  </CarouselInner>
  <CarouselControl direction="prev" role="button" onClick={() => { this.prev(); }} />
  <CarouselControl direction="next" role="button" onClick={() => { this.next(); }} />
</Carousel>
                
            

Initial active element required

The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.


Optional captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. 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.

                
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
    this.prev = this.prev.bind(this);
    this.state = {
      activeItem: 1,
      maxLength: 4
    };
  }

  next() {
    const nextItem = this.state.activeItem + 1;
    if(nextItem > this.state.maxLength) {
      this.setState({ activeItem: 1 });
    } else {
      this.setState({ activeItem: nextItem });
    }
  }

  prev() {
    const prevItem = this.state.activeItem - 1;
    if(prevItem < 1) {
      this.setState({ activeItem: this.state.maxLength });
    } else {
      this.setState({ activeItem: prevItem });
    }
  }

  goToIndex(item) {
    if (this.state.activeItem !== item) {
      this.setState({
        activeItem: item
      });
    }
  }
                
            
                
<Carousel 
  activeItem={this.state.activeItem}
  next={this.next}
  className="z-depth-1">
  <CarouselInner>
    <CarouselItem itemId="1">
      <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide" />
    </CarouselItem>
    <CarouselItem itemId="2">
      <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg" alt="First slide" />
      </CarouselCaption>
    </CarouselItem>
    <CarouselItem itemId="3">
      <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="First slide" />
    </CarouselItem>
    <CarouselItem itemId="4">
      <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20%28143%29.jpg" alt="Mattonit's item" />
    </CarouselItem>
  </CarouselInner>
  <CarouselControl direction="prev" role="button" onClick={() => { this.prev(); }} />
  <CarouselControl direction="next" role="button" onClick={() => { this.next(); }} />
</Carousel>