web
mobile
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.

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

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).jpg"
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg"
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg"
                  }
                ]
              }
            }
          }
        </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).jpg"
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg"
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg"
                  }
                ]
              }
            }
          }
        </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).jpg"
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg"
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"
                  }
                ]
              }
            }
          }
        </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 :items="basicCarousel" v-model="carousel" 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).jpg",
                    mask: "black-light",
                    alt: "First Slide",
                    caption: {
                      title: "First slide"
                    }
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg",
                    mask: "black-strong",
                    caption: {
                      title: "Second slide"
                    }
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg",
                    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).jpg",
                    
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg",
                    
                  },
                  {
                    img: true,
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg",
                    
                  }
                ]
              } 
            }
          }
        </script>
Edit these docs Rate these docs