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

Show code

template
script

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

Vertical example

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

Show code

template
script

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

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.

Show code

template
script

        
            
            <template>
              <MDBLightbox ref="lightboxRef">
                <MDBMultiCarousel
                  lightbox
                  @updateImage="$refs.lightboxRef.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
                }
              };
            </script>

Active items

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

Show code

template
script

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

Breakpoint

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

Show code

template
script

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

Autoplay

Set an interval property to enable autoplay.

Show code

template
script

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

Multi item carousel - API

Import

Show code

script

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

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