Multi item carousel
Angular 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 Bootstrap 5, Angular and Material Design. 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).
<mdb-multi-item-carousel [slides]="slides"></mdb-multi-item-carousel>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
slides = [
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
alt: 'Table Full of Spices',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
alt: 'Winter Landscape',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
alt: 'View of the City in the Mountains',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
alt: 'Place Royale Bruxelles',
},
];
}
Vertical example
To enable vertical mode just add vertical class to the wrapper element.
<mdb-multi-item-carousel [slides]="slides" [vertical]="true" style="max-width: 20rem;">
</mdb-multi-item-carousel>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
slides = [
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
alt: 'Table Full of Spices',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
alt: 'Winter Landscape',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
alt: 'View of the City in the Mountains',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
alt: 'Place Royale Bruxelles',
},
];
}
Lightbox integration
Set lightbox input to enable lightbox.
To ensure the proper performance of the page, it is recommended to include thumbnails of
images in the src key. Then in the
img key add the path to the image with higher resolution. If the
img key is omitted, the lightbox will display the same image as in
the reduced size.
<mdb-multi-item-carousel [lightbox]="true" [slides]="slides"></mdb-multi-item-carousel>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
slides = [
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
alt: 'Table Full of Spices',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
alt: 'Winter Landscape',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
alt: 'View of the City in the Mountains',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
alt: 'Place Royale Bruxelles',
},
];
}
Active items
Set a items input to change the number of active images.
<mdb-multi-item-carousel [slides]="slides" [items]="2"></mdb-multi-item-carousel>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
slides = [
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
alt: 'Table Full of Spices',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
alt: 'Winter Landscape',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
alt: 'View of the City in the Mountains',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
alt: 'Place Royale Bruxelles',
},
];
}
Breakpoint
To change breakpoint on small devices easily set
breakpoint value (default value is 992).
<mdb-multi-item-carousel [slides]="slides" [breakpoint]="992"></mdb-multi-item-carousel>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
slides = [
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
alt: 'Table Full of Spices',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
alt: 'Winter Landscape',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
alt: 'View of the City in the Mountains',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
alt: 'Place Royale Bruxelles',
},
];
}
Autoplay
Set a interval input to enable autoplay.
<mdb-multi-item-carousel [slides]="slides" [interval]="2000"></mdb-multi-item-carousel>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
slides = [
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
alt: 'Table Full of Spices',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
alt: 'Winter Landscape',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
alt: 'View of the City in the Mountains',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
alt: 'Place Royale Bruxelles',
},
];
}
Multi item carousel - API
Installation
To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section.
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/multi-item-carousel
Import
import { MdbMultiItemCarouselModule } from 'mdb-angular-multi-item-carousel';
…
@NgModule ({
...
imports: [MdbMultiItemCarouselModule],
...
})
@import 'mdb-angular-multi-item-carousel/scss/multi-item-carousel.scss';
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
slides
|
Array<MdbMultiItemCarouselSlide> | [] |
Defines slides to load |
items
|
number | 3 |
Defines number of visible items. |
vertical
|
boolean | false |
Changes orientation to vertical. |
lightbox
|
boolean | false |
Enables the lightbox option. |
breakpoint
|
number | 992 |
Defines window breakpoint in px to show only one item. |
interval
|
number | 0 |
Defines autoplay interval. When set to 0 autoplay is disabled. |
Outputs
| Name | Type | Description |
|---|---|---|
slide
|
EventEmitter<void> | Emitted when a multiCarousel has been slided. |
slided
|
EventEmitter<void> | Emitted after an image slide. |
<mdb-multi-item-carousel (slide)="onSlideEvent()" [slides]="slides"> </mdb-multi-item-carousel>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
onSlideEvent(): void {
console.log('User has slided the carousel');
}
slides = [
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
alt: 'Table Full of Spices',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
alt: 'Winter Landscape',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
alt: 'View of the City in the Mountains',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
alt: 'Place Royale Bruxelles',
},
];
}
Methods
| Name | Description | Example |
|---|---|---|
slideLeft |
Manually slides left the carousel | carousel.slideLeft() |
slideRight |
Manually slides right the carousel | carousel.slideRight() |
<mdb-multi-item-carousel #carousel [slides]="slides"> </mdb-multi-item-carousel>
import { OnInit Component} from '@angular/core';
import { MdbMultiItemCarouselComponent } from 'mdb-angular-multi-item-carousel';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
@ViewChild('carousel') carousel!: MdbMultiItemCarouselComponent;
ngOnInit(): void {
setTimeout(() => {
this.carousel.slideRight();
}, 1000);
}
slides = [
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/1.webp',
alt: 'Table Full of Spices',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/2.webp',
alt: 'Winter Landscape',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/3.webp',
alt: 'View of the City in the Mountains',
},
{
src: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
img: 'https://mdbootstrap.com/img/Photos/Slides/4.webp',
alt: 'Place Royale Bruxelles',
},
];
}