Edit these docs

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" slide :items="items"></mdb-carousel>
        </template>
      

        <script>
          import { mdbCarousel } from "mdbvue";
          export default {
            name: "CarouselPage",
            components: {
              mdbCarousel
            },
            data() {
              return {
                items: [
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(35).webp"
                  },
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(33).webp"
                  },
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(31).webp"
                  }
                ]
              };
            }
          };
        </script>

With controls

Adding the previous and next controls:


        <template>
          <mdb-carousel
            :interval="8000"
            slide
            :items="items"
            controlls
          ></mdb-carousel>
        </template>
      

        <script>
          import { mdbCarousel } from "mdbvue";
          export default {
            name: "CarouselPage",
            components: {
              mdbCarousel
            },
            data() {
              return {
                items: [
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(45).webp"
                  },
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(46).webp"
                  },
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(47).webp"
                  }
                ]
              };
            }
          };
        </script>

With indicators

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


        <template>
          <mdb-carousel
            :interval="8000"
            slide
            :items="items"
            indicators
          ></mdb-carousel>
        </template>
      

        <script>
          import { mdbCarousel } from "mdbvue";
          export default {
            name: "CarouselPage",
            components: {
              mdbCarousel
            },
            data() {
              return {
                items: [
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(130).webp"
                  },
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(129).webp"
                  },
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(70).webp"
                  }
                ]
              };
            }
          };
        </script>

With captions

To add captions to your carousel add caption object to each items which you pass to items array. All available options are listed in the API tab. 


        <template>
          <mdb-carousel
            slide
            :items="basicCarousel"
            indicators
          ></mdb-carousel>
        </template>
      

        <script>
          import { mdbCarousel } from "mdbvue";
          export default {
            name: "CarouselPage",
            components: {
              mdbCarousel
            },
            data() {
              return {
                carousel: 2,
                basicCarousel: [
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(68).webp",
                    mask: "black-light",
                    alt: "First Slide",
                    caption: {
                      title: "First slide"
                    }
                  },
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(6).webp",
                    mask: "black-strong",
                    caption: {
                      title: "Second slide"
                    }
                  },
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(9).webp",
                    mask: "black-slight",
                    caption: {
                      title: "Third slide"
                    }
                  }
                ]
              };
            }
          };
        </script>

Crossfade

Fade effect is added as a default in Vue Carousel.


        <template>
          <mdb-carousel
            :items="items"
            :interval="5000"
            controlls
          ></mdb-carousel>
        </template>
      

        <script>
          import { mdbCarousel } from "mdbvue";
          export default {
            name: "CarouselPage",
            components: {
              mdbCarousel
            },
            data() {
              return {
                items: [
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp"
                  },
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(16).webp"
                  },
                  {
                    img: true,
                    src:
                      "https://mdbootstrap.com/img/Photos/Slides/img%20(17).webp"
                  }
                ]
              };
            }
          };
        </script>
Edit these docs