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).
<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.
<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.
<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.
<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.
<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.
<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
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.
<div class="multi-carousel" data-mdb-multi-carousel-init data-mdb-items="2">
<!-- content -->
</div>
Via JavaScript
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.
$(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)
|
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. |
const carousel = document.getElementById('carousel');
carousel.addEventListener('slid.mdb.multiCarousel', (e) => {
// do something...
})