Edit these docs Rate these docs

Vue Bootstrap Carousel

Vue Carousel - Bootstrap 4 & Material Design

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.

In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

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

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).jpg" alt="First slide" />
            <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide" />
            <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" 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).jpg" alt="First slide" />
            <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide" />
            <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" 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).jpg" alt="First slide" />
            <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide" />
            <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" 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).jpg" 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).jpg" 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).jpg" 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).jpg" mask="black-light" alt="First slide">
            </mdb-carousel-item>
            <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" mask="black-strong" alt="Second slide">
            </mdb-carousel-item>
            <mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" 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 


        <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

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs