Multi item carousel

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. Many practical examples like lightbox integration, Vertical, autoplay, and many more.

Note: Read the API tab to find all available options and advanced customization

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

A basic example of a multi carousel with the most common use case with 3 active items (default version).

Edit in sandbox 
<div class="multi-carousel" data-mdb-multi-carousel-init>
  <div class="multi-carousel-inner">
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
        alt="Table Full of Spices"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
        alt="Winter Landscape"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
        alt="View of the City in the Mountains"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
        alt="Place Royale Bruxelles"
        class="w-100"
      />
    </div>
  </div>
  <button
    class="carousel-control-prev"
    type="button"
    tabindex="0"
    data-mdb-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button
    class="carousel-control-next"
    type="button"
    tabindex="0"
    data-mdb-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

Vertical example

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

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles
Edit in sandbox 
<div class="multi-carousel vertical" data-mdb-multi-carousel-init style="max-width: 20rem;">
  <div class="multi-carousel-inner">
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
        alt="Table Full of Spices"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
        alt="Winter Landscape"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
        alt="View of the City in the Mountains"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
        alt="Place Royale Bruxelles"
        class="w-100"
      />
    </div>
  </div>
  <button
    class="carousel-control-prev"
    type="button"
    tabindex="0"
    data-mdb-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button
    class="carousel-control-next"
    type="button"
    tabindex="0"
    data-mdb-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

Lightbox integration

Wrap carousel with 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-mdb-img attribute add the path to the image with higher resolution. If the data-mdb-img attribute is omitted, the lightbox will display the same image as in the reduced size.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles
Edit in sandbox 
<div class="lightbox" data-mdb-lightbox-init>
  <div class="multi-carousel" data-mdb-multi-carousel-init>
    <div class="multi-carousel-inner">
      <div class="multi-carousel-item">
        <img
          src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
          data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
          alt="Table Full of Spices"
          class="w-100"
        />
      </div>
      <div class="multi-carousel-item">
        <img
          src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
          data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
          alt="Winter Landscape"
          class="w-100"
        />
      </div>
      <div class="multi-carousel-item">
        <img
          src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
          data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
          alt="View of the City in the Mountains"
          class="w-100"
        />
      </div>
      <div class="multi-carousel-item">
        <img
          src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
          data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
          alt="Place Royale Bruxelles"
          class="w-100"
        />
      </div>
    </div>
    <button
      class="carousel-control-prev"
      type="button"
      tabindex="0"
      data-mdb-slide="prev"
    >
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </button>
    <button
      class="carousel-control-next"
      type="button"
      tabindex="0"
      data-mdb-slide="next"
    >
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </button>
  </div>
</div>

Active items

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

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles
Edit in sandbox 
<div class="multi-carousel" data-mdb-multi-carousel-init data-mdb-items="2">
  <div class="multi-carousel-inner">
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
        alt="Table Full of Spices"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
        alt="Winter Landscape"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
        alt="View of the City in the Mountains"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
        alt="Place Royale Bruxelles"
        class="w-100"
      />
    </div>
  </div>
  <button
    class="carousel-control-prev"
    type="button"
    tabindex="0"
    data-mdb-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button
    class="carousel-control-next"
    type="button"
    tabindex="0"
    data-mdb-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

Breakpoint

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

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles
Edit in sandbox 
<div class="multi-carousel" data-mdb-multi-carousel-init data-mdb-breakpoint="1200">
  <div class="multi-carousel-inner">
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
        alt="Table Full of Spices"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
        alt="Winter Landscape"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
        alt="View of the City in the Mountains"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
        alt="Place Royale Bruxelles"
        class="w-100"
      />
    </div>
  </div>
  <button
    class="carousel-control-prev"
    type="button"
    tabindex="0"
    data-mdb-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button
    class="carousel-control-next"
    type="button"
    tabindex="0"
    data-mdb-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

Autoplay

Set a data-mdb-interval attribute to enable autoplay.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles
Edit in sandbox 
<div class="multi-carousel" data-mdb-multi-carousel-init data-mdb-interval="2000">
  <div class="multi-carousel-inner">
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
        alt="Table Full of Spices"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
        alt="Winter Landscape"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
        alt="View of the City in the Mountains"
        class="w-100"
      />
    </div>
    <div class="multi-carousel-item">
      <img
        src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
        alt="Place Royale Bruxelles"
        class="w-100"
      />
    </div>
  </div>
  <button
    class="carousel-control-prev"
    type="button"
    tabindex="0"
    data-mdb-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button
    class="carousel-control-next"
    type="button"
    tabindex="0"
    data-mdb-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

Multi item carousel - API

Import

Edit in sandbox 
import MultiCarousel from 'mdb-multi-carousel';
@import '~mdb-multi-carousel/css/multi-carousel.min.css';

Usage

Via data attributes

Using the Multi Item Carousel plugin doesn't require any additional JavaScript code - simply add data-mdb-multi-carousel-init attribute to .multi-carousel and use other data attributes to set all options.

Edit in sandbox 
<div class="multi-carousel" data-mdb-multi-carousel-init data-mdb-items="2">
  <!-- content -->
</div>

Via JavaScript

Edit in sandbox 
const element = document.querySelector('.multi-carousel');
const instance = new MultiCarousel(carousel);

Via jQuery

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

Edit in sandbox 
$(document).ready(() => {
  $('#carousel').multiCarousel('slideNext');
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-breakpoint="".

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)
Edit in sandbox 
const carousel = document.getElementById('carousel');
const instance = MultiCarousel.getInstance(carousel);
instance.slidePrev();

Events

Name Description
slide.mdb.multiCarousel Emitted when a multiCarousel has been slid.
slid.mdb.multiCarousel Emitted after an image slide.
Edit in sandbox 
const carousel = document.getElementById('carousel');
carousel.addEventListener('slid.mdb.multiCarousel', (e) => {
  // do something...
})