ItSolutionStuff.com

Angular Material Carousel Slider Example

By Hardik Savani • May 2, 2024
Angular

Hi,

I will explain step by step tutorial how to add carousel in angular material. step by step explain angular material carousel slider example. if you want to see example of angular material carousel example then you are a right place. Here you will learn angular material design carousel example. follow bellow step for angular @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, you can easily use with angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 version.

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

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular Owl Carousel/Slider Example Tutorial

Read Now →

Angular Slick Carousel/Slider Example

Read Now →

Angular Material Autocomplete with API Example

Read Now →

Angular Material Autocomplete Select Option Event Example

Read Now →

Angular Material Input Autocomplete Example

Read Now →

Angular Material Input Autocomplete Off Example

Read Now →

Angular Material Phone Number Input Mask Example

Read Now →

Angular 11 Material Datepicker Example

Read Now →

Angular Material Copy to Clipboard Example

Read Now →

Angular Material Expansion Panel Example | Angular mat-expansion-panel

Read Now →

Angular Material Stepper Example | Angular Material Stepper

Read Now →