Sign in


Sign up


Vue Bootstrap Carousel

MDB gives you a possibility to present your images, videos, and text messages in much more eye-pleasant form by providing you with few stunning carousels.

Each carousel is fully responsive and works perfectly on any device or browser.


Basic example

                
<carousel :interval="8000">
  <carousel-inner>
    <carousel-item :class="{active: show[0]}" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide">
    </carousel-item>
    <carousel-item :class="{active: show[1]}" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Secondary slide">
    </carousel-item>
    <carousel-item :class="{active: show[2]}" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide">
    </carousel-item>
  </carousel-inner>
</carousel>
                
            

Initial active element required

The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.


Optional captions

Add captions to your slides easily with the <carousel-caption> element within any <carousel-item>. Place just about any optional HTML within there and it will be automatically aligned and formatted.

If your content is not visible enough, you can cover the image with a darker mask.

You can easily change the intensity and color of the mask. To learn more read our MASKS documentation.

                
<carousel :interval="8000">
  <carousel-indicators>
    <carousel-indicator :index="0" :class="{active: show[0]}"></carousel-indicator>
    <carousel-indicator :index="1" :class="{active: show[1]}"></carousel-indicator>
    <carousel-indicator :index="2" :class="{active: show[2]}"></carousel-indicator>
  </carousel-indicators>
  <carousel-inner>
    <carousel-item :class="{active: show[0]}">
      <view-wrapper overlay="black-light" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide">
        <mdmask flex-center waves></mdmask>
      </view-wrapper>
      <carousel-caption title="Light mask" text="First text"></carousel-caption>
    </carousel-item>
    <carousel-item :class="{active: show[1]}">
      <view-wrapper overlay="black-strong" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Secondary slide">
        <mdmask flex-center waves></mdmask>
      </view-wrapper>
      <carousel-caption title="Strong mask" text="Secondary text"></carousel-caption>
    </carousel-item>
    <carousel-item :class="{active: show[2]}">
      <view-wrapper overlay="black-slight" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide">
        <mdmask flex-center waves></mdmask>
      </view-wrapper>
      <carousel-caption title="Slight mask" text="Third text"></carousel-caption>
    </carousel-item>
  </carousel-inner>
  <carousel-navigation></carousel-navigation>
</carousel>