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.

        
            
            <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. 

        
            
              <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>

Dark variant

Use [dark]="true" input for darker controls, indicators, and captions.

        
            
            <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>

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 true, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

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

Event type Description
slide Fires immediately when the carousel start to slide.
slideChange 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

Method Description
play Cycles through the carousel items from left to right.
stop Stops the carousel from cycling through items.
prev Cycles to the previous item.
next Cycles to the next item.
to Cycles the carousel to a particular frame (0 based, similar to an array). 
        
            
            <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).