Angular 10 Material Carousel Slider

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 10 Material Carousel Slider.

Guys here is the updated Material Carousel for Angular 11+ : Angular 11 Material Carousel

Angular 10 came and if you are new in Angular 10 then please check below links:

Angular 10 for beginners

Angular 10 basic tutorials

Here are the basic steps for angular 10 material carousel slider and please follow carefully:

1. Here is the command, you need to run into your command prompt:

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

2. Here is the code, you need to add into your app.module.ts file:

//...
import { MatCarouselModule } from '@ngmodule/material-carousel';
 
@NgModule({
  // ...
  imports: [
    // ...
    MatCarouselModule.forRoot(),
    // ...
  ]
})
export class AppModule {}

3. Here is the code, you need to add into your app.component.ts file:

...
import { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel';

export class AppComponent {
   ...
   // Slider Images
   slides = [{'image': 'https://therichpost.com/wp-content/uploads/2021/02/Vuejs-Fashion-Ecommerce-Template-Free.png'}, {'image': 'https://therichpost.com/wp-content/uploads/2021/02/angular-11-bootstrap-4.5-Ecommerce-Template-Free.png'},{'image': 'https://therichpost.com/wp-content/uploads/2020/10/Angular-10-Learning-Education-Center-Free-Template-1.png'}, {'image': 'https://therichpost.com/wp-content/uploads/2020/11/Reactjs-Easy-Shop-Free-Template-with-Source-Code.png'}, {'image': 'https://therichpost.com/wp-content/uploads/2021/02/angular-11-bootstrap-4.5-Ecommerce-Template-Free.png'}];

  
}

4. Here is the code, you need to add your app.component.html file:

<h1 style="text-align:center;">Angular 9 Material Carousel Slider</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>

This is it and if you have any kind of query then please comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thank you