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

                
<template>
  <carousel :interval="8000" showControls>
    <carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide" />
    <carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide" />
    <carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide" />
  </carousel>
</template>

<script>
import { Carousel, CarouselItem } from 'mdbvue';

export default {
  name: 'CarouselPage',
  components: {
    Carousel,
    CarouselItem
  }
};
</script>

<style scoped>
</style>
                
            

Half carousel

To use half page carouel You can easily change it's height to 50vh.


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.

                
<template>
  <carousel :interval="8000" showControls>
    <carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" mask="black-light" alt="First slide">
      <carousel-caption title="Light mask" text="First text"></carousel-caption>
    </carousel-item>
    <carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" mask="black-strong" alt="Second slide">
      <carousel-caption title="Strong mask" text="Second text"></carousel-caption>
    </carousel-item>
    <carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" mask="black-slight" alt="Third slide">
      <carousel-caption title="Super light mask" text="Third text"></carousel-caption>
    </carousel-item>
  </carousel>
</template>

<script>
import { Carousel, CarouselItem, CarouselCaption } from 'mdbvue';

export default {
  name: 'CarouselPage',
  components: {
    Carousel,
    CarouselItem,
    CarouselCaption
  }
};
</script>

<style scoped>
</style>
                
            

Multi-item carousel MDB Pro component

                
<template>
  <container class="mt-5">
    <carousel :interval="8000" showControls showIndicators multi slide>
      <carousel-item>
        <row>
          <column md="4">
            <card class="mb-2">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap" waves></card-img>
              <card-body>
                <card-title>Card title</card-title>
                <card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</card-text>
                <btn color="primary">Button</btn>
              </card-body>
            </card>
          </column>
          <column md="4" class="clearfix d-none d-md-block">
            <card class="mb-2">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap" waves></card-img>
              <card-body>
                <card-title>Card title</card-title>
                <card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</card-text>
                <btn color="primary">Button</btn>
              </card-body>
            </card>
          </column>
          <column md="4" class="clearfix d-none d-md-block">
            <card class="mb-2">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap" waves></card-img>
              <card-body>
                <card-title>Card title</card-title>
                <card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</card-text>
                <btn color="primary">Button</btn>
              </card-body>
            </card>
          </column>
        </row>
      </carousel-item>
      <carousel-item>
        <row>
          <column md="4">
            <card class="mb-2">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(60).jpg" alt="Card image cap" waves></card-img>
              <card-body>
                <card-title>Card title</card-title>
                <card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</card-text>
                <btn color="primary">Button</btn>
              </card-body>
            </card>
          </column>
          <column md="4" class="clearfix d-none d-md-block">
            <card class="mb-2">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg" alt="Card image cap" waves></card-img>
              <card-body>
                <card-title>Card title</card-title>
                <card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</card-text>
                <btn color="primary">Button</btn>
              </card-body>
            </card>
          </column>
          <column md="4" class="clearfix d-none d-md-block">
            <card class="mb-2">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg" alt="Card image cap" waves></card-img>
              <card-body>
                <card-title>Card title</card-title>
                <card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</card-text>
                <btn color="primary">Button</btn>
              </card-body>
            </card>
          </column>
        </row>
      </carousel-item>
      <carousel-item>
        <row>
          <column md="4">
            <card class="mb-2">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(53).jpg" alt="Card image cap" waves></card-img>
              <card-body>
                <card-title>Card title</card-title>
                <card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</card-text>
                <btn color="primary">Button</btn>
              </card-body>
            </card>
          </column>
          <column md="4" class="clearfix d-none d-md-block">
            <card class="mb-2">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" alt="Card image cap" waves></card-img>
              <card-body>
                <card-title>Card title</card-title>
                <card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</card-text>
                <btn color="primary">Button</btn>
              </card-body>
            </card>
          </column>
          <column md="4" class="clearfix d-none d-md-block">
            <card class="mb-2">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(51).jpg" alt="Card image cap" waves></card-img>
              <card-body>
                <card-title>Card title</card-title>
                <card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</card-text>
                <btn color="primary">Button</btn>
              </card-body>
            </card>
          </column>
        </row>
      </carousel-item>
    </carousel>
  </container>
</template>

<script>
import { Carousel, CarouselItem, CarouselCaption, Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardText, Btn } from 'mdbvue';

export default {
  name: 'CarouselPage',
  components: {
    Carousel,
    CarouselItem,
    CarouselCaption,
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardText,
    Btn
  }
};
</script>

<style scoped>
</style>
                
            

Thumbnails carousel MDB Pro component

                        
<template>
  <carousel :interval="8000" showControls showIndicators thumbnails>
    <carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).jpg" thumbnail="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(88).jpg" alt="First slide">
    </carousel-item>
    <carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).jpg" thumbnail="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(121).jpg" alt="Second slide">
    </carousel-item>
    <carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" thumbnail="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(31).jpg" alt="Third slide">
    </carousel-item>
  </carousel>
</template>

<script>
import { Carousel, CarouselItem, CarouselCaption } from 'mdbvue';

export default {
  name: 'ThumbnailsCarouselPage',
  components: {
    Carousel,
    CarouselItem,
    CarouselCaption
  }
};
</script>

<style scoped>
</style>
                        
                        

Video Carousel

                        
<template>
  <carousel :interval="8000" showControls showIndicators full>
    <carousel-item video src="https://mdbootstrap.com/img/video/Tropical.mp4" alt="First slide" auto loop>
    </carousel-item>
    <carousel-item video src="https://mdbootstrap.com/img/video/forest.mp4" alt="Second slide" auto loop>
    </carousel-item>
    <carousel-item video src="https://mdbootstrap.com/img/video/Agua-natural.mp4" alt="Third slide" auto loop>
    </carousel-item>
  </carousel>
</template>

<script>
import { Carousel, CarouselItem } from 'mdbvue';

export default {
  name: 'VideoCarouselPage',
  components: {
    Carousel,
    CarouselItem
  }
};
</script>

<style scoped>
</style>
                        
                        

Caption

                            
<template>
  <carousel :interval="8000" showControls showIndicators>
    <carousel-item video src="https://mdbootstrap.com/img/video/Tropical.mp4" alt="First slide" auto loop>
      <carousel-caption title="Carousel Caption" text="First text"></carousel-caption>
    </carousel-item>
    <carousel-item video src="https://mdbootstrap.com/img/video/forest.mp4" alt="Second slide" auto loop>
      <carousel-caption title="Carousel Caption" text="Second text"></carousel-caption>
    </carousel-item>
    <carousel-item video src="https://mdbootstrap.com/img/video/Agua-natural.mp4" alt="Third slide" auto loop>
      <carousel-caption title="Carousel Caption" text="Third text"></carousel-caption>
    </carousel-item>
  </carousel>
</template>

<script>
import { Carousel, CarouselItem, CarouselCaption } from 'mdbvue';

export default {
  name: 'VideoCarouselPage',
  components: {
    Carousel,
    CarouselItem,
    CarouselCaption
  }
};
</script>

<style scoped>
</style>