Multi item carousel

Vue Bootstrap 5 Multi item carousel plugin

An advanced slideshow component for cycling through images with a selectable number of active items.

Responsive Multi item carousel built with the latest Bootstrap 5 and Vue 3. Many practical examples like lightbox integration, Vertical, autoplay, and many more.

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

Basic example

A basic example of a multi carousel with the most common use case with 3 active items (default version). 

<template>
  <MDBMultiCarousel
    :images="[
      {
        src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg',
        alt: 'Gallery image 1',
        class: 'w-100',
      },
      {
        src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg',
        alt: 'Gallery image 2',
        class: 'w-100',
      },
      {
        src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg',
        alt: 'Gallery image 3',
        class: 'w-100',
      },
      {
        src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg',
        alt: 'Gallery image 4',
        class: 'w-100',
      },
    ]"
  />
</template>
<script>
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";

  export default {
    components: {
      MDBMultiCarousel
    }
  };
</script>
<script setup lang="ts">
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
</script>

Vertical example

To enable vertical mode just add vertical property to the component.

Gallery image 1
Gallery image 2
Gallery image 3
Gallery image 4 
<template>
  <MDBMultiCarousel vertical style="max-width: 20rem">
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
      alt="Gallery image 1"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
      alt="Gallery image 2"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
      alt="Gallery image 3"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
      alt="Gallery image 4"
      class="w-100"
    />
  </MDBMultiCarousel>
</template>
<script>
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";

  export default {
    components: {
      MDBMultiCarousel
    }
  };
</script>
<script setup lang="ts">
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
</script>

Lightbox integration

Wrap carousel by a div.lightbox element to enable lightbox.

Wrap carousel by a MDBLightbox element and add lightbox property to enable lightbox. Remember to update Lightbox images on Carousel's updateImages event.

To ensure the proper performance of the page, it is recommended to include thumbnails of images in the src attribute. Then in the fullScreenSrc attribute add the path to the image with higher resolution. If the fullScreenSrc attribute is omitted, the lightbox will display the same image as in the reduced size.

Gallery image 1
Gallery image 2
Gallery image 3
Gallery image 4 
<template>
  <MDBLightbox ref="lightboxRef">
    <MDBMultiCarousel
      lightbox
      @updateImage="updateImages"
    >
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
        fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.jpg"
        alt="Gallery image 1"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
        fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/2.jpg"
        alt="Gallery image 2"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
        fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/3.jpg"
        alt="Gallery image 3"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
        fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/4.jpg"
        alt="Gallery image 4"
        class="w-100"
      />
    </MDBMultiCarousel>
  </MDBLightbox>
</template>
<script>
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { MDBLightbox } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBMultiCarousel,
      MDBLightbox
    },
    setup() {
      const lightboxRef = ref();
      const updateImages = () => lightboxRef.value.updateImages();

      return {
        lightboxRef,
        updateImages,
      }
    }
  };
</script>
<script setup lang="ts">
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { MDBLightbox } from "mdb-vue-ui-kit";

  const lightboxRef = ref<InstanceType<typeof MDBLightbox>>();
  const updateImages = () => lightboxRef.value.updateImages();
</script>

Active items

Set a items property to change the number of active images.

Gallery image 1
Gallery image 2
Gallery image 3
Gallery image 4 
<template>
  <MDBMultiCarousel :items="2">
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
      alt="Gallery image 1"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
      alt="Gallery image 2"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
      alt="Gallery image 3"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
      alt="Gallery image 4"
      class="w-100"
    />
  </MDBMultiCarousel>
</template>
<script>
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";

  export default {
    components: {
      MDBMultiCarousel
    }
  };
</script>
<script setup lang="ts">
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
</script>

Breakpoint

To change breakpoint on small devices easily set breakpoint property value (default value is 992). Set to false to disable responsiveness.

Gallery image 1
Gallery image 2
Gallery image 3
Gallery image 4 
<template>
  <MDBMultiCarousel :breakpoint="1200">
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
      alt="Gallery image 1"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
      alt="Gallery image 2"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
      alt="Gallery image 3"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
      alt="Gallery image 4"
      class="w-100"
    />
  </MDBMultiCarousel>
</template>
<script>
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";

  export default {
    components: {
      MDBMultiCarousel
    }
  };
</script>
<script setup lang="ts">
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
</script>

Autoplay

Set an interval property to enable autoplay.

Gallery image 1
Gallery image 2
Gallery image 3
Gallery image 4 
<template>
  <MDBMultiCarousel :interval="2000">
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
      alt="Gallery image 1"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
      alt="Gallery image 2"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
      alt="Gallery image 3"
      class="w-100"
    />
    <img
      src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
      alt="Gallery image 4"
      class="w-100"
    />
  </MDBMultiCarousel>
</template>
<script>
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";

  export default {
    components: {
      MDBMultiCarousel
    }
  };
</script>
<script setup lang="ts">
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
</script>

Multi item carousel - API

Import

<script>
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
</script>

Properties

Name Type Default Description
breakpoint Number / String / Boolean 992 Defines window breakpoint in px to show only one item. Set to false to disable.
images Array [] Defines images array for JavaScript initialization
interval Number / String / Boolean false Defines autoplay interval. Disabled as a default.
items Number / String 3 Defines number of visible items.
lightbox Boolean false Allows using carousel inside MDBLightbox component.
tag String 'div' Defines element tag for component wrapper.
vertical Boolean false Sets vertical carousel.

Methods

Name Description
next Slides to the next item.
prev Slides to the previous item. 
<template>
  <MDBBtn color="primary" @click="carouselRef?.next()">Next</MDBBtn>
  <MDBMultiCarousel
    ref="carouselRef"
    :images="[
      {
        src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg',
        alt: 'Gallery image 1',
        class: 'w-100',
      },
      {
        src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg',
        alt: 'Gallery image 2',
        class: 'w-100',
      },
      {
        src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg',
        alt: 'Gallery image 3',
        class: 'w-100',
      },
      {
        src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg',
        alt: 'Gallery image 4',
        class: 'w-100',
      },
    ]"
  />
</template>
<script>
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBMultiCarousel,
      MDBBtn,
    },
    setup() {
      const carouselRef = ref(null);

      return {
        carouselRef,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const carouselRef = ref<InstanceType<typeof MDBMultiCarousel> | null>(null);
</script>

Events

Name Description
slide Emitted when a multiCarousel has been slided.
slided Emitted after an image slide.
updateImages Emitted after an image collection is updated. Necessary for Lightbox integration 
<template>
  <MDBMultiCarousel @slide="doSomething" />
</template>