Angular Material Carousel Slider Example

By Hardik Savani | March 15, 2021 | Category : 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 and angular 11 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
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: