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 theAPI 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 addvertical property to the component.
<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 adiv.lightbox element to enable lightbox.
Wrap carousel by aMDBLightbox element and addlightbox property to enable lightbox. Remember to update Lightbox images on Carousel'supdateImages event.
To ensure the proper performance of the page, it is recommended to include thumbnails of images in the src attribute. Then in thefullScreenSrc attribute add the path to the image with higher resolution. If thefullScreenSrc attribute is omitted, the lightbox will display the same image as in the reduced size.
<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 aitems property to change the number of active images.
<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 setbreakpoint property value (default value is 992). Set tofalse to disable responsiveness.
<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 aninterval property to enable autoplay.
<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>Related resources
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 tofalse 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 insideMDBLightbox 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>