Multi item carousel MDB Pro component

Multi item carousel - Bootstrap 5 & Material Design 2.0 plugin

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

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


          <div class="multi-carousel">
            <div class="multi-carousel-inner">
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
                  alt="Gallery image 1"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
                  alt="Gallery image 2"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
                  alt="Gallery image 3"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
                  alt="Gallery image 4"
                  class="w-100"
                />
              </div>
            </div>
            <a class="carousel-control-prev" tabindex="0" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" tabindex="0" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
          </div>
        

Vertical example

To enable vertical mode just add vertical class to the wrapper element.


          <div class="multi-carousel vertical" style="max-width: 20rem">
            <div class="multi-carousel-inner">
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
                  alt="Gallery image 1"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
                  alt="Gallery image 2"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
                  alt="Gallery image 3"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
                  alt="Gallery image 4"
                  class="w-100"
                />
              </div>
            </div>
            <a class="carousel-control-prev" tabindex="0" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" tabindex="0" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
          </div>
        

Lightbox integration

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

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


          <div class="lightbox">
            <div class="multi-carousel">
              <div class="multi-carousel-inner">
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
                    data-img="https://mdbootstrap.com/img/Photos/Slides/1.jpg"
                    alt="Gallery image 1"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
                    data-img="https://mdbootstrap.com/img/Photos/Slides/2.jpg"
                    alt="Gallery image 2"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
                    data-img="https://mdbootstrap.com/img/Photos/Slides/3.jpg"
                    alt="Gallery image 3"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
                    data-img="https://mdbootstrap.com/img/Photos/Slides/4.jpg"
                    alt="Gallery image 4"
                    class="w-100"
                  />
                </div>
              </div>
              <a class="carousel-control-prev" tabindex="0" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              </a>
              <a class="carousel-control-next" tabindex="0" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
              </a>
            </div>
          </div>
        

Active items

Set a data-items attribute to change the number of active images.


          <div class="multi-carousel" data-items="2">
            <div class="multi-carousel-inner">
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
                  data-img="https://mdbootstrap.com/img/Photos/Slides/1.jpg"
                  alt="Gallery image 1"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
                  data-img="https://mdbootstrap.com/img/Photos/Slides/2.jpg"
                  alt="Gallery image 2"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
                  data-img="https://mdbootstrap.com/img/Photos/Slides/3.jpg"
                  alt="Gallery image 3"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
                  data-img="https://mdbootstrap.com/img/Photos/Slides/4.jpg"
                  alt="Gallery image 4"
                  class="w-100"
                />
              </div>
            </div>
            <a class="carousel-control-prev" tabindex="0" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" tabindex="0" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
          </div>
        

Breakpoint

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


          <div class="multi-carousel" data-breakpoint="1200">
            <div class="multi-carousel-inner">
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
                  alt="Gallery image 1"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
                  alt="Gallery image 2"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
                  alt="Gallery image 3"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
                  alt="Gallery image 4"
                  class="w-100"
                />
              </div>
            </div>
            <a class="carousel-control-prev" tabindex="0" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" tabindex="0" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
          </div>
        

Autoplay

Set a data-interval attribute to enable autoplay.


          <div class="multi-carousel" data-interval="2000">
            <div class="multi-carousel-inner">
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
                  alt="Gallery image 1"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg"
                  alt="Gallery image 2"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg"
                  alt="Gallery image 3"
                  class="w-100"
                />
              </div>
              <div class="multi-carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg"
                  alt="Gallery image 4"
                  class="w-100"
                />
              </div>
            </div>
            <a class="carousel-control-prev" tabindex="0" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" tabindex="0" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
          </div>
        

Multi item carousel - API


Usage

Via data attributes


        <div class="multi-carousel" data-items="2">
          <!-- content -->
        </div>
      

Via JavaScript


        const carousel = document.getElementById('carousel');
        const instance = MultiCarousel.getInstance(carousel);
        instance.slideNext();
      

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

 $('#carousel').multiCarousel('slideNext'); 

Options

Name Type Default Description
items Number / String 3 Defines number of visible items.
breakpoint Number / String / Boolean 992 Defines window breakpoint in px to show only one item. Set to false to disable.
interval Number / String / Boolean false Defines autoplay interval. Disabled as a default.

Methods

Name Parameters Description Example
init Initializes multi carousel. instance.init()
slideNext Slides to the next item. instance.slideNext()
slidePrev Slides to the previous item. instance.slidePrev()
dispose Removes the MultiCarousel instance. instance.dispose()
getInstance element Static method which allows to get the carousel instance associated with a DOM element. MultiCarousel.getInstance(element)

        const carousel = document.getElementById('carousel');
        const instance = MultiCarousel.getInstance(carousel);
        instance.slidePrev();
      

Events

Name Description
slide.mdb.multiCarousel Emitted when a multiCarousel has been slided.
slided.mdb.multiCarousel Emitted after an image slide.

        const carousel = document.getElementById('carousel');
        carousel.addEventListener('slided.mdb.multiCarousel', (e) => {
          // do something...
        })
      

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


        import { MultiCarousel } from 'mdb-multi-carousel';