How to Add Carousel in Angular 11 Material?

This article will provide some of the most important example how to add carousel in angular 11 material. if you have question about angular 11 material carousel slider example then i will give simple example with solution. In this article, we will implement a angular 11 material carousel example. Here you will learn angular 11 material design carousel example. Let's get started with angular 11 @ngbmodule/material-carousel example.

@ngbmodule/material-carousel package provide to adding material carousel to your angular project. here we will see material carousel simple example with preview:

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install npm Package

Now in this step, we need to just install ngmodule/material-carousel and angular/material in our angular application. so let's add as like bellow:

ng add @angular/material
  
npm install @ngmodule/material-carousel

Step 3: Import MatCarouselModule

we will import MatCarouselModule module as like bellow code:

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
     
import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
  
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import { MatCarouselModule } from '@ngmodule/material-carousel';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatCarouselModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update Ts File

here, we need to update ts file as like bellow:

src/app/app.component.ts

import { Component } from '@angular/core';
import { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  
export class AppComponent {
  
  slides = [
      {'image': 'https://gsr.dev/material2-carousel/assets/demo.png'}, 
      {'image': 'https://gsr.dev/material2-carousel/assets/demo.png'},
      {'image': 'https://gsr.dev/material2-carousel/assets/demo.png'}, 
      {'image': 'https://gsr.dev/material2-carousel/assets/demo.png'}, 
      {'image': 'https://gsr.dev/material2-carousel/assets/demo.png'}
    ];
      
}

Step 5: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

<h1>Angular Material Carousel Slider Example - ItSolutionStuff.com</h1>
  
<mat-carousel
  timings="250ms ease-in"
  [autoplay]="true"
  interval="5000"
  color="accent"
  maxWidth="auto"
  proportion="25"
  slides="5"
  [loop]="true"
  [hideArrows]="false"
  [hideIndicators]="false"
  [useKeyboard]="true"
  [useMouseWheel]="false"
  orientation="ltr"
>
  <mat-carousel-slide
    #matCarouselSlide
    *ngFor="let slide of slides; let i = index"
    [image]="slide.image"
    overlayColor="#00000040"
    [hideOverlay]="false"
  ></mat-carousel-slide>
</mat-carousel>

Now you can run by bellow command:

ng serve

now you can check it.

I hope it can help you...