Rate this 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>

<style scoped>
</style>

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>

<style scoped>
</style>

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>

<style scoped>
</style>

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.



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

<style scoped>
</style>

Full page carousels

Click the buttons below to see a live preview.

Full Image Carousel Full Video Carousel

Carousel - API

In this section you will find advanced information about the Carousel component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement


import { mdbCarousel, mdbCarouselItem, mdbCarouselCaption } from 'mdbvue';

API Reference: Properties

Name Type Default Description Example
indicatorClass String false Adding custom classes to indicators. <mdb-carousel indicatorClass="...">
interval Number 10000 Defines the interval of slide animation (in seconds). <mdb-carousel :interval="5000">
multi Boolean false Changes basic carousel into multi-item carousel. <mdb-carousel multi>
navClass String false Adding custom classes to navigation controls. <mdb-carousel navClass="...">
showControls Boolean false Adding the previous and next controls. <mdb-carousel showControls>
showIndicators Boolean false Adding indicators. <mdb-carousel showIndicators>
slide Boolean false Changes fade animation effect into slide. <mdb-carousel slide>
thumbnails Boolean false Changes basic carousel into thumbnails carousel. <mdb-carousel thumbnails>
top Boolean false Showing controls above the carousel inner. <mdb-carousel top>