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>