Vue Bootstrap Carousel

Vue Carousel - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

A slideshow component for cycling through elements—images or slides of text—like a carousel.

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.

This documentation may contain syntax introduced in the MDB Vue 6.0.0 and can be incompatible with previous versions. See legacy docs.

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

Vue live preview Vue live preview (PRO)

Example

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.

Slides only

        
            
      <template>
        <mdb-carousel :interval="8000">
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).webp" alt="First slide" />
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).webp" alt="Second slide" />
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).webp" alt="Third slide" />
        </mdb-carousel>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbCarousel,
          mdbCarouselItem
        } from 'mdbvue';
        export default {
          name: 'CarouselPage',
          components: {
            mdbCarousel,
            mdbCarouselItem
          }
        }
      </script>

With controls

Adding the previous and next controls:

        
            
      <template>
        <mdb-carousel :interval="8000" showControls>
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).webp" alt="First slide" />
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).webp" alt="Second slide" />
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).webp" alt="Third slide" />
        </mdb-carousel>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbCarousel,
          mdbCarouselItem
        } from 'mdbvue';
        export default {
          name: 'CarouselPage',
          components: {
            mdbCarousel,
            mdbCarouselItem
          }
        }
      </script>

With indicators

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

        
            
      <template>
        <mdb-carousel :interval="8000" showControls showIndicators>
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).webp" alt="First slide" />
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).webp" alt="Second slide" />
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).webp" alt="Third slide" />
        </mdb-carousel>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbCarousel,
          mdbCarouselItem
        } from 'mdbvue';
        export default {
          name: 'CarouselPage',
          components: {
            mdbCarousel,
            mdbCarouselItem
          }
        }
      </script>

With captions

Add captions to your slides easily with the mdb-carousel-caption component within any mdb-carousel-item.

        
            
      <template>
        <mdb-carousel :interval="8000" showControls showIndicators>
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).webp" mask="black-light"
            alt="First slide">
            <mdb-carousel-caption title="Light mask" text="First text"></mdb-carousel-caption>
          </mdb-carousel-item>
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).webp" mask="black-strong"
            alt="Second slide">
            <mdb-carousel-caption title="Strong mask" text="Second text"></mdb-carousel-caption>
          </mdb-carousel-item>
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).webp" mask="black-slight"
            alt="Third slide">
            <mdb-carousel-caption title="Super light mask" text="Third text"></mdb-carousel-caption>
          </mdb-carousel-item>
        </mdb-carousel>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbCarousel,
          mdbCarouselItem,
          mdbCarouselCaption
        } from 'mdbvue';
        export default {
          name: 'CarouselPage',
          components: {
            mdbCarousel,
            mdbCarouselItem,
            mdbCarouselCaption
          }
        }
      </script>

Crossfade

Fade effect is added as a default in Vue Carousel.

        
            
      <template>
        <mdb-carousel :interval="8000" showControls showIndicators>
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).webp" mask="black-light"
            alt="First slide">
          </mdb-carousel-item>
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).webp" mask="black-strong"
            alt="Second slide">
          </mdb-carousel-item>
          <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).webp" mask="black-slight"
            alt="Third slide">
          </mdb-carousel-item>
        </mdb-carousel>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbCarousel,
          mdbCarouselItem,
          mdbCarouselCaption
        } from 'mdbvue';
        export default {
          name: 'CarouselPage',
          components: {
            mdbCarousel,
            mdbCarouselItem,
            mdbCarouselCaption
          }
        }
      </script>

Video carousel

Replace img elements with video elements to create a video carousel. 

        
            
      <template>
        <mdb-carousel :interval="8000" showControls showIndicators>
          <mdb-carousel-item video src="https://mdbootstrap.com/img/video/Tropical.mp4" alt="First slide" auto loop>
          </mdb-carousel-item>
          <mdb-carousel-item video src="https://mdbootstrap.com/img/video/forest.mp4" alt="Second slide" auto loop>
          </mdb-carousel-item>
          <mdb-carousel-item video src="https://mdbootstrap.com/img/video/Agua-natural.mp4" alt="Third slide" auto loop>
          </mdb-carousel-item>
        </mdb-carousel>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbCarousel,
          mdbCarouselItem
        } from 'mdbvue';
        export default {
          name: 'VideoCarouselPage',
          components: {
            mdbCarousel,
            mdbCarouselItem
          }
        }
      </script>

Caption and mask

If you want to add a caption to your carousel you will probably also need to cover it with a dark mask, to make your caption more visible. To animate captions add animation property with an animation's name. The list of all available animations you can find here.

        
            
      <template>
        <mdb-carousel :interval="8000" showControls showIndicators>
          <mdb-carousel-item video src="https://mdbootstrap.com/img/video/Tropical.mp4" mask="black-light"
            alt="First slide" auto loop>
            <mdb-carousel-caption animation="fadeInDown" title="Carousel Caption" text="First text">
            </mdb-carousel-caption>
          </mdb-carousel-item>
          <mdb-carousel-item video src="https://mdbootstrap.com/img/video/forest.mp4" mask="black-slight"
            alt="Second slide" auto loop>
            <mdb-carousel-caption animation="fadeInDown" title="Carousel Caption" text="Second text">
            </mdb-carousel-caption>
          </mdb-carousel-item>
          <mdb-carousel-item video src="https://mdbootstrap.com/img/video/Agua-natural.mp4" mask="black-strong"
            alt="Third slide" auto loop>
            <mdb-carousel-caption animation="fadeInDown" title="Carousel Caption" text="Third text">
            </mdb-carousel-caption>
          </mdb-carousel-item>
        </mdb-carousel>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbCarousel,
          mdbCarouselItem,
          mdbCarouselCaption
        } from 'mdbvue';
        export default {
          name: 'VideoCarouselPage',
          components: {
            mdbCarousel,
            mdbCarouselItem,
            mdbCarouselCaption
          }
        }
      </script>

Full page carousels

Click the buttons below to see a live preview.

Full Image Carousel Full Video Carousel