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">
        <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>
</template>

<script>
import { Carousel, CarouselIndicators, CarouselIndicator, CarouselInner, CarouselItem, CarouselNavigation, CarouselCaption, ViewWrapper, MdMask } from 'mdbvue';

export default {
  name: 'CarouselPage',
  components: {
    Carousel,
    CarouselIndicators,
    CarouselIndicator,
    CarouselInner,
    CarouselItem,
    CarouselNavigation,
    CarouselCaption,
    ViewWrapper,
    MdMask
  },
  data() {
    return {
      page: 0,
      items: '',
      interval: 10000,
      show: { 0: true, 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 7: false, 8: false, 9: false }
    };
  },
  methods: {
    slidePage(target) {
      if (target === "next") {
        if (this.page < this.items) {
          this.show[this.page] = false;
          this.page++;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page = 0;
          this.show[this.page] = true;
        }
      } else if (target === "prev") {
        if (this.page == 0) {
          this.show[this.page] = false;
          this.page = this.items;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page--;
          this.show[this.page] = true;
        }
      } else {
        this.show[this.page] = false;
        this.page = target;
        this.show[this.page] = true;
      }
    },
    autoSlide() {
      this.slide = setInterval(() => {
        this.slidePage('next');
      }, this.interval);
    }
  },
  created() {
    this.$on('changeSlide', function(showSlide) {
      this.slidePage(showSlide.slideIndex);
      clearInterval(this.slide);
      this.autoSlide();
    });
    this.$on('defineInterval', function(defineInterval) {
      this.interval = defineInterval.newInterval;
    });
  },
  mounted() {
    this.items = this.$el.querySelectorAll('.carousel-item').length - 1;
    this.autoSlide();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.carousel {
  overflow: hidden;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
}

.carousel-item {
  display: block !important;
  visibility: hidden;
  height: 0;
  opacity: 0;
  transition: transform 0ms ease-in-out, opacity .6s ease-in;
  transform: translate3d(0, 0, 0) !important;
}

.carousel-item.active {
  opacity: 1;
  left: auto;
  height: auto;
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
}
</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" class="mt-5 mx-5">
    <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]}" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide">
        <carousel-caption title="Carousel Caption" text="First text"></carousel-caption>
      </carousel-item>
      <carousel-item :class="{active: show[1]}" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Seccond slide">
        <carousel-caption title="Carousel Caption" text="Second text"></carousel-caption>
      </carousel-item>
      <carousel-item :class="{active: show[2]}" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide">
        <carousel-caption title="Carousel Caption" text="Third text"></carousel-caption>
      </carousel-item>
    </carousel-inner>
    <carousel-navigation></carousel-navigation>
  </carousel>
</template>

<script>
import { Carousel, CarouselIndicators, CarouselIndicator, CarouselInner, CarouselItem, CarouselNavigation, CarouselCaption, ViewWrapper, MdMask } from 'mdbvue';

export default {
  name: 'CarouselPage',
  components: {
    Carousel,
    CarouselIndicators,
    CarouselIndicator,
    CarouselInner,
    CarouselItem,
    CarouselNavigation,
    CarouselCaption,
    ViewWrapper,
    MdMask
  },
  data() {
    return {
      page: 0,
      items: '',
      interval: 10000,
      show: { 0: true, 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 7: false, 8: false, 9: false }
    };
  },
  methods: {
    slidePage(target) {
      if (target === "next") {
        if (this.page < this.items) {
          this.show[this.page] = false;
          this.page++;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page = 0;
          this.show[this.page] = true;
        }
      } else if (target === "prev") {
        if (this.page == 0) {
          this.show[this.page] = false;
          this.page = this.items;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page--;
          this.show[this.page] = true;
        }
      } else {
        this.show[this.page] = false;
        this.page = target;
        this.show[this.page] = true;
      }
    },
    autoSlide() {
      this.slide = setInterval(() => {
        this.slidePage('next');
      }, this.interval);
    }
  },
  created() {
    this.$on('changeSlide', function(showSlide) {
      this.slidePage(showSlide.slideIndex);
      clearInterval(this.slide);
      this.autoSlide();
    });
    this.$on('defineInterval', function(defineInterval) {
      this.interval = defineInterval.newInterval;
    });
  },
  mounted() {
    this.items = this.$el.querySelectorAll('.carousel-item').length - 1;
    this.autoSlide();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.carousel {
  overflow: hidden;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
}

.carousel-item {
  display: block !important;
  visibility: hidden;
  height: 0;
  opacity: 0;
  transition: transform 0ms ease-in-out, opacity .6s ease-in;
  transform: translate3d(0, 0, 0) !important;
}

.carousel-item.active {
  opacity: 1;
  left: auto;
  height: auto;
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
}
</style>
                
            

Multi-item carousel MDB Pro component

                        
<template>
  <container class="mt-5">
    <carousel :interval="8000" @defineInterval="handleIntervalChange" multi>
      <carousel-navigation top @changeSlide="handleChangeSlide"></carousel-navigation>
      <carousel-indicators>
        <carousel-indicator :index="0" :class="{active: show[0]}" @changeSlide="handleChangeSlide"></carousel-indicator>
        <carousel-indicator :index="1" :class="{active: show[1]}" @changeSlide="handleChangeSlide"></carousel-indicator>
        <carousel-indicator :index="2" :class="{active: show[2]}" @changeSlide="handleChangeSlide"></carousel-indicator>
      </carousel-indicators>
      <carousel-inner>
        <carousel-item :class="{active: show[0]}">
          <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 :class="{active: show[1]}">
          <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 :class="{active: show[2]}">
          <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-inner>
    </carousel>
  </container>
</template>

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

export default {
  name: 'CarouselPage',
  components: {
    Carousel,
    CarouselIndicators,
    CarouselIndicator,
    CarouselInner,
    CarouselItem,
    CarouselNavigation,
    CarouselCaption,
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardText,
    Btn
  },
  data() {
    return {
      page: 0,
      items: '',
      interval: 10000,
      show: { 0: true, 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 7: false, 8: false, 9: false }
    };
  },
  methods: {
    slidePage(target) {
      if (target === "next") {
        if (this.page < this.items) {
          this.show[this.page] = false;
          this.page++;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page = 0;
          this.show[this.page] = true;
        }
      } else if (target === "prev") {
        if (this.page == 0) {
          this.show[this.page] = false;
          this.page = this.items;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page--;
          this.show[this.page] = true;
        }
      } else {
        this.show[this.page] = false;
        this.page = target;
        this.show[this.page] = true;
      }
    },
    autoSlide() {
      this.slide = setInterval(() => {
        this.slidePage('next');
      }, this.interval);
    },
    handleChangeSlide(showSlide) {
      this.slidePage(showSlide.slideIndex);
      clearInterval(this.slide);
      this.autoSlide();
    },
    handleIntervalChange(defineInterval) {
      this.interval = defineInterval.newInterval;
    }
  },
  mounted() {
    this.items = this.$el.querySelectorAll('.carousel-item').length - 1;
    this.autoSlide();
  },
};
</script>

<style scoped>
.carousel,
.carousel-item,
.carousel-item.active {
  height: 100%;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
}

.carousel-item {
  display: block !important;
  visibility: hidden;
  height: 0;
  opacity: 0;
  transition: transform 0ms ease-in-out, opacity .6s ease-in;
  transform: translate3d(0, 0, 0) !important;
}

.carousel-item.active {
  opacity: 1;
  left: auto;
  height: auto;
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
}
</style>
                        
                        

Thumbnails carousel MDB Pro component

                        
<template>
  <carousel :interval="8000" @defineInterval="handleIntervalChange" thumbnails>
    <carousel-inner>
      <carousel-item :class="{active: show[0]}" img src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).jpg" alt="First slide">
      </carousel-item>
      <carousel-item :class="{active: show[1]}" img src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).jpg" alt="Second slide">
      </carousel-item>
      <carousel-item :class="{active: show[2]}" img src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide">
      </carousel-item>
    </carousel-inner>
    <carousel-navigation @changeSlide="handleChangeSlide"></carousel-navigation>
    <carousel-indicators>
      <carousel-indicator :index="0" :class="{active: show[0]}" @changeSlide="handleChangeSlide" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(88).jpg" alt="first preview"></carousel-indicator>
      <carousel-indicator :index="1" :class="{active: show[1]}" @changeSlide="handleChangeSlide" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(121).jpg" alt="second preview"></carousel-indicator>
      <carousel-indicator :index="2" :class="{active: show[2]}" @changeSlide="handleChangeSlide" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(31).jpg" alt="third preview"></carousel-indicator>
    </carousel-indicators>
  </carousel>
</template>

<script>
import { Carousel, CarouselIndicators, CarouselIndicator, CarouselInner, CarouselItem, CarouselNavigation, CarouselCaption, ViewWrapper, MdMask } from 'mdbvue';

export default {
  name: 'ThumbnailsCarouselPage',
  components: {
    Carousel,
    CarouselIndicators,
    CarouselIndicator,
    CarouselInner,
    CarouselItem,
    CarouselNavigation,
    CarouselCaption,
    ViewWrapper,
    MdMask
  },
  data() {
    return {
      page: 0,
      items: '',
      interval: 10000,
      show: { 0: true, 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 7: false, 8: false, 9: false }
    };
  },
  methods: {
    slidePage(target) {
      if (target === "next") {
        if (this.page < this.items) {
          this.show[this.page] = false;
          this.page++;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page = 0;
          this.show[this.page] = true;
        }
      } else if (target === "prev") {
        if (this.page == 0) {
          this.show[this.page] = false;
          this.page = this.items;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page--;
          this.show[this.page] = true;
        }
      } else {
        this.show[this.page] = false;
        this.page = target;
        this.show[this.page] = true;
      }
    },
    autoSlide() {
      this.slide = setInterval(() => {
        this.slidePage('next');
      }, this.interval);
    },
    handleChangeSlide(showSlide) {
      this.slidePage(showSlide.slideIndex);
      clearInterval(this.slide);
      this.autoSlide();
    },
    handleIntervalChange(defineInterval) {
      this.interval = defineInterval.newInterval;
    }
  },
  mounted() {
    this.items = this.$el.querySelectorAll('.carousel-item').length - 1;
    this.autoSlide();
  },
};
</script>

<style scoped>
.carousel,
.carousel-item,
.carousel-item.active {
  height: 100%;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
}

.carousel-item {
  display: block !important;
  visibility: hidden;
  height: 0;
  opacity: 0;
  transition: transform 0ms ease-in-out, opacity .6s ease-in;
  transform: translate3d(0, 0, 0) !important;
}

.carousel-item.active {
  opacity: 1;
  left: auto;
  height: auto;
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
}
</style>
                        
                        

Video Carousel

                        
<template>
  <carousel :interval="8000" class="mt-5 mx-5">
    <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]}" src="https://mdbootstrap.com/img/video/Tropical.mp4" alt="First slide" auto loop>
      </carousel-item>
      <carousel-item :class="{active: show[1]}" src="https://mdbootstrap.com/img/video/forest.mp4" alt="Second slide" auto loop>
      </carousel-item>
      <carousel-item :class="{active: show[2]}" src="https://mdbootstrap.com/img/video/Agua-natural.mp4" alt="Third slide" auto loop>
      </carousel-item>
    </carousel-inner>
    <carousel-navigation></carousel-navigation>
  </carousel>
</template>

<script>
import { Carousel, CarouselIndicators, CarouselIndicator, CarouselInner, CarouselItem, CarouselNavigation, CarouselCaption, ViewWrapper, MdMask } from 'mdbvue';

export default {
  name: 'VideoCarouselPage',
  components: {
    Carousel,
    CarouselIndicators,
    CarouselIndicator,
    CarouselInner,
    CarouselItem,
    CarouselNavigation,
    CarouselCaption,
    ViewWrapper,
    MdMask
  },
  data() {
    return {
      page: 0,
      items: '',
      interval: 10000,
      show: { 0: true, 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 7: false, 8: false, 9: false }
    };
  },
  methods: {
    slidePage(target) {
      if (target === "next") {
        if (this.page < this.items) {
          this.show[this.page] = false;
          this.page++;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page = 0;
          this.show[this.page] = true;
        }
      } else if (target === "prev") {
        if (this.page == 0) {
          this.show[this.page] = false;
          this.page = this.items;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page--;
          this.show[this.page] = true;
        }
      } else {
        this.show[this.page] = false;
        this.page = target;
        this.show[this.page] = true;
      }
    },
    autoSlide() {
      this.slide = setInterval(() => {
        this.slidePage('next');
      }, this.interval);
    }
  },
  created() {
    this.$on('changeSlide', function(showSlide) {
      this.slidePage(showSlide.slideIndex);
      clearInterval(this.slide);
      this.autoSlide();
    });
    this.$on('defineInterval', function(defineInterval) {
      this.interval = defineInterval.newInterval;
    });
  },
  mounted() {
    this.items = this.$el.querySelectorAll('.carousel-item').length - 1;
    this.autoSlide();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.carousel {
  overflow: hidden;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
}

.carousel-item {
  display: block !important;
  visibility: hidden;
  height: 0;
  opacity: 0;
  transition: transform 0ms ease-in-out, opacity .6s ease-in;
  transform: translate3d(0, 0, 0) !important;
}

.carousel-item.active {
  opacity: 1;
  left: auto;
  height: auto;
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
}
</style>
                        
                        

Caption

                            
<template>
  <carousel :interval="8000" class="mt-5 mx-5">
    <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]}" 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 :class="{active: show[1]}" 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 :class="{active: show[2]}" 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-inner>
    <carousel-navigation></carousel-navigation>
  </carousel>
</template>

(... Script part the same as in the above examples ...)