Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Material Carousel Slider.
Guys here is the updated Material Carousel for Angular 12 : Angular 11 Material Carousel
Angular 16 came and if you are new then you must check below two links:
Here are the basic steps for Angular Material Carousel Slider and please follow carefully:
1. Here is the command, you need to run into your command prompt to get angular material modules:
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>
Now we are done friends. If you have any kind of query or suggestion or requirement then feel free to 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
Leave a Reply