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.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles 
<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.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles 
<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.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles 
<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).

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles 
<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.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Place Royale Bruxelles 
<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',
    },
  ];
}