Home Angular 10 Angular 10 Material Carousel Slider

Angular 10 Material Carousel Slider

by therichpost
Published: Last Updated on 11 comments
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

You may also like

11 comments

Ania July 16, 2020 - 9:14 am

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

Reply
Ajay Malhotra July 16, 2020 - 10:11 am

Yes but I am busy with other projects.

Reply
Ania July 16, 2020 - 10:13 am

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

Reply
Ajay Malhotra July 16, 2020 - 10:20 am

May be!!

Reply
Anton Fedorchenko July 17, 2020 - 8:47 am

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!

Reply
Ajay Malhotra July 17, 2020 - 8:54 am

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

Reply
Anton Fedorchenko July 17, 2020 - 10:00 am

Great, thanks! I will be wait.

Reply
Ajay Malhotra July 17, 2020 - 10:13 am

Sure and thank you..

Reply
Anton Fedorchenko July 17, 2020 - 12:53 pm

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

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

Reply
Ajay Malhotra July 17, 2020 - 3:26 pm

You are always welcome.

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.