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
Basic example
A basic example of a multi carousel with the most common use case with 3 active items (default version).
Vertical example
To enable vertical mode just add vertical class to the wrapper element.
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-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.
Active items
Set a data-mdb-items attribute to change the number of active images.
Breakpoint
To change breakpoint on small devices easily set
data-mdb-breakpoint value (default value is 992). Set to false to
disable responsiveness.
Autoplay
Set a data-mdb-interval attribute to enable autoplay.
Multi item carousel - API
Usage
Via data attributes
<div class="multi-carousel" data-mdb-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';