Angular 10 Material Carousel Slider

Angular 9, Angular 10

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

Material Slider

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

Comments

11 responses to “Angular 10 Material Carousel Slider”

  1. Ania Avatar
    Ania

    Can u show us something impressive like recording a video with a camera this week?

  2. Ajay Malhotra Avatar

    Yes but I am busy with other projects.

  3. Ania Avatar
    Ania

    Do u think u can show how to do it in July?

  4. Anton Fedorchenko Avatar
    Anton Fedorchenko

    Hi, Ajay!

    Few days ago I made comment on your YouTube channel with question about how create this carousel with multiple slides in a row. I understand that you have not much time to help people like me, but maybe you can just answer is it possible with this npm-package or not? Because I have not much time to realize this and need to know is there a sense to wait your answer.

    Thanks` in any case.

    Best regards, Anton!

  5. Ajay Malhotra Avatar

    I will try it today and ping you back. You can check my new comment here.
    Thanks

  6. Anton Fedorchenko Avatar
    Anton Fedorchenko

    Great, thanks! I will be wait.

  7. Ajay Malhotra Avatar

    Sure and thank you..

  8. Anton Fedorchenko Avatar
    Anton Fedorchenko

    So I need to use Owl Carousel, not Angular 10 Material Carousel. Understand. Ok.

    Have a nice day, Master. May 4 be with you!

  9. Ajay Malhotra Avatar

    You are always welcome.