Carousel
Angular Bootstrap 5 Carousel component
Responsive carousel built with Bootstrap 5, Angular and Material Design. Slider examples with indicators, captions, image and multiple item carousel.
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Note: Read the API tab to find all available options and advanced customization
Basic example
Carousel allows to navigate through a collection of images in a sequential fashion, moving to the previous/next one through the arrows on the sides.
.webp)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<mdb-carousel [controls]="true" [indicators]="true" [animation]="'fade'">
<mdb-carousel-item>
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</mdb-carousel-item>
</mdb-carousel>
How it works
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
Note: Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.
Variations
Slides only
Here’s a carousel with slides only. Note the presence of the
.d-block and .w-100 on carousel images to prevent browser default
image alignment.
<mdb-carousel>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
</mdb-carousel>
With controls
Use [controls]="true" input to add the previous and next controls:
<mdb-carousel [controls]="true">
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
</mdb-carousel>
With indicators
You can also add the indicators to the carousel with [indicators]="true" input.
<mdb-carousel [controls]="true" [indicators]="true">
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
</mdb-carousel>
With captions
Add captions to your slides easily with the
.carousel-caption element within any mdb-carousel-item component.
They can be easily hidden on smaller viewports, as shown below, with optional
display utilities. We hide them initially
with .d-none and bring them back on medium-sized devices with
.d-md-block.
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<mdb-carousel [controls]="true" [indicators]="true">
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</mdb-carousel-item>
</mdb-carousel>
Animation
Use [animation]="'fade'" input to change carousel animation type from
slide to fade.
<mdb-carousel [controls]="true" [animation]="'fade'">
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
</mdb-carousel>
Individual mdb-carousel-item interval
Use [interval] input on specific mdb-carousel-item component to
change the amount of time to delay between automatically cycling to the next item.
<mdb-carousel [controls]="true">
<mdb-carousel-item [interval]="10000">
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item [interval]="2000">
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
</mdb-carousel>
Material style
If you want to make your carousel look more "material" wrap the
mdb-carousel component with .carousel-inner element and use the
rounded-* and shadow-* classes to add rounded corners and a
shadows.
.webp)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<div class="carousel-inner rounded-5 shadow-4-strong">
<mdb-carousel [controls]="true" [indicators]="true" [animation]="'fade'">
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/042.jpg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/043.jpg"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</mdb-carousel-item>
</mdb-carousel>
</div>
Dark variant
Use [dark]="true" input for darker controls, indicators, and captions.
.webp)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<mdb-carousel [controls]="true" [indicators]="true" [dark]="true">
<mdb-carousel-item>
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(19).webp"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).webp"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(40).webp"
class="d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</mdb-carousel-item>
</mdb-carousel>
Multi-item carousel
A basic example of a multi carousel with the most common use case with 3 active items (default version).
If you need more advanced options and examples of multi-item carousel have a look at Multi-item Carousel Docs
<mdb-multi-item-carousel [slides]="slides"></mdb-multi-item-carousel>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
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',
},
];
}
Carousel - API
Import
import { MdbCarouselModule } from 'mdb-angular-ui-kit/carousel';
…
@NgModule ({
...
imports: [MdbCarouselModule],
...
})
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
interval |
number | 5000 |
The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
keyboard |
boolean | true |
Whether the carousel should react to keyboard events. |
pause |
boolean | true |
If set to |
ride |
boolean | true |
Autoplays the carousel on load. If "false", autoplays the carousel after the user manually cycles the first item. |
wrap |
boolean | true |
Whether the carousel should cycle continuously or have hard stops. |
Outputs
| Name | Type | Description |
|---|---|---|
slide |
EventEmitter<void> | Fires immediately when the carousel start to slide. |
slideChange |
EventEmitter<void> | Fired when the carousel has completed its slide transition. |
<mdb-carousel [controls]="true" (slideChange)="onSlideChange()">
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
</mdb-carousel>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {}
onSlideChange(): void {
console.log('slide change');
}
}
Methods
| Name | Description | Example |
|---|---|---|
play |
Cycles through the carousel items from left to right. | carousel.play() |
stop |
Stops the carousel from cycling through items. | carousel.stop() |
prev |
Cycles to the previous item. | carousel.prev() |
next |
Cycles to the next item. | carousel.next() |
to(index: number) |
Cycles the carousel to a particular frame (0 based, similar to an array). | carousel.to(2) |
<mdb-carousel #carousel [controls]="true">
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
<mdb-carousel-item>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp"
class="d-block w-100"
alt="..."
/>
</mdb-carousel-item>
</mdb-carousel>
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MdbCarouselComponent } from 'mdb-angular-ui-kit/carousel';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
@ViewChild('carousel') carousel!: MdbCarouselComponent;
constructor() {}
ngAfterViewInit(): void {
this.carousel.stop();
}
}
Change transition duration
The transition duration of .carousel-item can be changed with the
$carousel-transition Sass variable before compiling or custom styles if you’re
using the compiled CSS. If multiple transitions are applied, make sure the transform
transition is defined first (eg.
transition: transform 2s ease, opacity .5s ease-out).
CSS variables
As part of MDB’s evolving CSS variables approach, carousel now uses local CSS variables on
.carousel-control-prev-icon, .carousel-control-next-icon for enhanced real-time
customization. Values for the CSS variables are set via Sass, so Sass customization is still
supported, too.
--#{$prefix}carousel-control-icon-font-size: #{$carousel-control-icon-font-size};
--#{$prefix}carousel-control-icon-font-weight: #{$font-weight-bold};
SCSS variables
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: 0.5;
$carousel-control-hover-opacity: 0.9;
$carousel-control-transition: opacity 0.15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: 0.5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity 0.6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: 0.6s;
$carousel-control-prev-icon-bg: none;
$carousel-control-next-icon-bg: none;
$carousel-control-icon-font-size: 1.7rem;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);