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.
<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.
<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.
<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.
<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.
<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>