Carousel

Vue Bootstrap 5 Carousel component

Responsive Vue carousel built with the latest Bootstrap 5. Carousel is a slideshow cycling through different elements such as photos, videos, or text. Many examples and easy tutorials.

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

Note: Read the API tab to find all available options and advanced customization


Basic example


          <template>
            <MDBCarousel
              v-model="carousel1"
              :items="items1"
              fade
            />
          </template>
        

          <script>
            import { ref } from "vue";
            import { MDBCarousel } from "mdb-vue-ui-kit";

            export default {
              components: {
                MDBCarousel
              },
              setup() {
                const items1 = [
                  {
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg",
                    alt: "...",
                    label: "First slide label",
                    caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
                  },
                  {
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg",
                    alt: "...",
                    label: "Second slide label",
                    caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                  },
                  {
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg",
                    alt: "...",
                    label: "Third slide label",
                    caption:
                      "Praesent commodo cursus magna, vel scelerisque nisl consectetur."
                  }
                ];
                const carousel1 = ref(0);

                return {
                  items1,
                  carousel1
                };
              }
            };
          </script>
        

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.).

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

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. Add and customize as you see fit.


Variations

Slides only

Here’s a carousel with slides only. By default itemsClass property contains .d-block and .w-100 to prevent browser default image alignment.


            <template>
              <MDBCarousel
                v-model="carousel2"
                :items="items2"
                :controls="false"
                :indicators="false"
              />
            </template>
          

            <script>
              import { ref } from "vue";
              import { MDBCarousel } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBCarousel
                },
                setup() {
                  const items2 = [
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg",
                      alt: "..."
                    },
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg",
                      alt: "..."
                    },
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg",
                      alt: "..."
                    }
                  ];
                  const carousel2 = ref(0);

                  return {
                    items2,
                    carousel2
                  };
                }
              };
            </script>
          

With controls

Previous and next controls are added by default. Change the controls property to turn arrows on or off.


            <template>
              <MDBCarousel
                v-model="carousel3"
                :items="items3"
                :indicators="false"
              />
            </template>
          

            <script>
              import { ref } from "vue";
              import { MDBCarousel } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBCarousel
                },
                setup() {
                  const items3 = [
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg",
                      alt: "..."
                    },
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg",
                      alt: "..."
                    },
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg",
                      alt: "..."
                    }
                  ];
                  const carousel3 = ref(0);

                  return {
                    items3,
                    carousel3
                  };
                }
              };
            </script>
          

With indicators

You can also add the indicators to the carousel, alongside the controls. Change the indicators property to enable or disable them.


            <template>
              <MDBCarousel
                v-model="carousel4"
                :items="items4"
              />
            </template>
          

            <script>
              import { ref } from "vue";
              import { MDBCarousel } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBCarousel
                },
                setup() {
                  const items4 = [
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg",
                      alt: "..."
                    },
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg",
                      alt: "..."
                    },
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg",
                      alt: "..."
                    }
                  ];
                  const carousel4 = ref(0);

                  return {
                    items4,
                    carousel4
                  };
                }
              };
            </script>
          

With captions

Add captions to your slides easily with the label and caption keys in items array. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block. Edit captionsClass property to change default classes.


            <template>
              <MDBCarousel
                v-model="carousel5"
                :items="items5"
              />
            </template>
          

            <script>
              import { ref } from "vue";
              import { MDBCarousel } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBCarousel
                },
                setup() {
                  const items5 = [
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg",
                      alt: "...",
                      label: "First slide label",
                      caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
                    },
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg",
                      alt: "...",
                      label: "Second slide label",
                      caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                    },
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg",
                      alt: "...",
                      label: "Third slide label",
                      caption:
                        "Praesent commodo cursus magna, vel scelerisque nisl consectetur."
                    }
                  ];
                  const carousel5 = ref(0);

                  return {
                    items5,
                    carousel5
                  };
                }
              };
            </script>
          

Animation

Add fade property to your MDBCarousel to animate slides with a fade transition instead of a slide.


            <template>
              <MDBCarousel
                v-model="carousel6"
                :items="items6"
                :indicators="false"
                fade
              />
            </template>
          

            <script>
              import { ref } from "vue";
              import { MDBCarousel } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBCarousel
                },
                setup() {
                  const items6 = [
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg",
                      alt: "..."
                    },
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg",
                      alt: "..."
                    },
                    {
                      src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg",
                      alt: "..."
                    }
                  ];
                  const carousel6 = ref(0);

                  return {
                    items6,
                    carousel6
                  };
                }
              };
            </script>
          

Dark variant

Add dark property to the MDBCarousel for darker controls, indicators, and captions.


          <template>
            <MDBCarousel
              v-model="carousel8"
              :items="items8"
              fade
              dark
            />
          </template>
        

          <script>
            import { ref } from "vue";
            import { MDBCarousel } from "mdb-vue-ui-kit";

            export default {
              components: {
                MDBCarousel
              },
              setup() {
                const items8 = [
                  {
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(19).jpg",
                    alt: "...",
                    label: "First slide label",
                    caption: "Nulla vitae elit libero, a pharetra augue mollis interdum."
                  },
                  {
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg",
                    alt: "...",
                    label: "Second slide label",
                    caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                  },
                  {
                    src: "https://mdbootstrap.com/img/Photos/Slides/img%20(40).jpg",
                    alt: "...",
                    label: "Third slide label",
                    caption:
                      "Praesent commodo cursus magna, vel scelerisque nisl consectetur."
                  }
                ];
                const carousel8 = ref(0);

                return {
                  items8,
                  carousel8
                };
              }
            };
          </script>
        

Carousel - API


Import


        import { MDBCarousel } from "mdb-vue-ui-kit";
      

Properties

Name Type Default Description
captionsClass String "carousel-caption d-none d-md-block" Changes captions classNames
controls Boolean true Enables controls
dark Boolean false Enables dark mode
fade Boolean false Enables fade animation effect
indicators Boolean true Enables indicators
interval [Number, Boolean] 5000 Defines or disables sliding interval
items Array Defines carousel items
itemsClass String "d-block w-100" Defines carousel items classNames
keyboard Boolean true Enables keyboard navigation
pause [String, Boolean] "hover" Enables pause on hover. If set to false disable pausing.
tag String "div" Defines wrapper tag
touch Boolean true Enables touch events
v-model Number 0 Defines active element key

Methods

Method Description
prev Cycles to the previous item.
next Cycles to the next item.

          <MDBCarousel v-model="testCarousel1" :items="testItems1" ref="testCarousel" :interval="false" />
          <MDBBtn @click.stop="$refs.testCarousel.prev()" color="primary" size="sm">Prev</MDBBtn>
          <MDBBtn @click.stop="$refs.testCarousel.next()" color="primary" size="sm">Next</MDBBtn>
          <MDBBtn @click.stop="testCarousel1 = 0" color="primary" size="sm">0</MDBBtn>
          <MDBBtn @click.stop="testCarousel1 = 1" color="primary" size="sm">1</MDBBtn>
          <MDBBtn @click.stop="testCarousel1 = 2" color="primary" size="sm">2</MDBBtn>