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
75 comments
ERROR in The target entry-point “@ngmodule/material-carousel” has missing dependencies:
– @angular/core
– @angular/platform-browser
– @angular/animations
– @angular/cdk/a11y
– @angular/common
– rxjs
– rxjs/operators
– @angular/material/button
– @angular/material/icon
– @angular/material/core
– @angular/compiler/src/core
im getting this error while adding it to app module
Please try this also:
npm install –save @angular/material
npm install –save @angular/animations
I don’t see anything on my screen. Totally blank. Did I do something wrong? Do we have to do anything else?
After cli update and angular 10 came and I also going to update this and thank you your reply.
Thank you and it worked well.
Thank you karen.
how we can add more than 1 item on one slide? for example, if I want to have a multi-items slider
Try this:
https://therichpost.com/how-to-implement-owl-carousel-slider-in-angular-8/
Hi, how can I change slider transition animation?
Hi, you want to change the slider animate timings?
I have issue with the size of my carousel
It’s within a router outlet and it doesn’t display correctly, the size is too big and overwhelms the navigator. As a consequence the arrow on the right is not displayed.
The other issue is that the image used in the carousel are too bigs sometimes and they don’t fully display.
You can do this with custom styles and for images, you can decrease the image size.
Thanks
You can only display 1920×480 size image ?
yes
How can I display text over the slide??
HI, I will share the working post link. Thanks
Please check this:
https://therichpost.com/how-to-display-text-over-angular-material-carousel-slider/
Hi, it this material carousel support click event? for example, after clicks image 1 and will navigate to another page. Appreciated your help!
Yes and this link will help you to add custom button on every slider.
Thanks
Hi, thanks for your reply. By the way, which link i can refer.
I will update you soon. https://therichpost.com/how-to-display-text-over-angular-material-carousel-slider/
Hi I am not getting the arrows and indicators are not middle of the carousel.
Could you help me
Hi, you are not getting material carousel slider like my example?
I am not getting the icons “->” and “<-". The slide indicators are not in the middle of page.
thank you!
Is this written for v10 or 9?
Yes this is for both. Thanks
i have saved the image to the base64 string format in database but on retrieval i am unable to bind it to the carousel.
my code of carousel is
above line of code does not work
but when i simply write
out of the
this code shows the image on the screen.
Please help.
Hi, can you please send me your image src or you can email me on therichposts@gmail.com
Thanks
Hello. I’m getting a word “back and forward arrow” instead of an icon, Any thoughts?
Yes, you can do with custom script code.
Thanks
I’m a newbie to programming. Do you have an example?
I will update you and if you are subscribed then you will get noticed. Thanks.
Click bell icon bottom left.
Done
You need to import below into your app.module.ts file:
import {MatIconModule} from ‘@angular/material/icon’;
Thanks
I did that and nothing happens 🙂
Thanks for your reply
🙂
Am I missing anything?
1).how can i use proportion=25 in laptop view and proportion=80 in mobile view ?
2).and I am getting the following warning-
Warning: Entry point ‘@ngmodule/material-carousel’ contains deep imports into ‘C:/Users/teja/Desktop/jgd_courses-sample/jgd/node_modules/@angular/compiler/src/core’. This is probably not a problem, but may cause the compilation of entry points to be out of order.
3).and error in console:
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘undefined’. Current value: ‘[object Object]’.
at throwErrorIfNoChangesMode (core.js:5467)
at bindingUpdated (core.js:13112)
at Module.ɵɵproperty (core.js:13907)
at MatCarouselComponent_li_4_Template (ngmodule-material-carousel.js:55)
at executeTemplate (core.js:7447)
at refreshView (core.js:7316)
at refreshEmbeddedViews (core.js:8408)
at refreshView (core.js:7340)
at refreshComponent (core.js:8454)
at refreshChildComponents (core.js:7109)
please resolve these three isuues
I need to see your code.
Dear Ajay,
How can I increase the size of the carousel. Like a full page carousel slider.
Please guide.
Thank You
Hi and this is already full width slider.
Thanks
I want this slider to cover full height of the page.
Okay means full page slider?
Yes,
Also if you can provide a proper easy to.underatand angular flex tutorial, that will be a great help.
The carousel is inside router outlet.
I am sharing the code, please help.
app.component.html
app.component.css
mat-sidenav-container, mat-sidenav-content,mat-sidenav {
height: 100%;
}
mat-sidenav {
width: 250px;
}
welcome.component.html
app-routing.module.ts
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { AppComponent } from ‘src/app/app.component’;
import { WelcomeComponent } from ‘src/app/welcome/welcome.component’;
const routes: Routes = [
{ path: ”, component: WelcomeComponent }
];
@NgModule({
declarations: [],
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
Don’t worry, I will update you soon.
Ok thanks
Thank You so much,it worked well. I Appreciate your work.
Thank you 🙂
Hello! thanks for the tutorial, I’m struggling right now because I am trying to build a Carousel of Material Cards in Angular 10, but I can’t find nothing.
I’d like to know if is it possible to use cards instead of images for this carousel..
Thanks in advance.
Kind regards,
Costantino
Welcome and I will update you on this.
Is it possible to add router-link or click event on the images of the slider? if yes then please tell me how?
Yes and I will update you on this.
Thanks
there is no output event like (drag)=drageslide($event)
I did not get your query?
– i make click on element but when i drag slide i need to prevent click event.
-how to show 3.5 item in slide.
Okay, I will update you.
Thanks.
How can I change the arrow icons with another mat icons??
With CSS you can do that.
My error:
Error: src/app/product/product.component.html:53:1 – error TS2322: Type ‘string’ is not assignable to type ‘number’.
53 interval=”5000″
~~~~~~~~~~~~~~~
src/app/product/product.component.ts:15:18
15 templateUrl: ‘./product.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ProductComponent.
src/app/product/product.component.html:56:1 – error TS2322: Type ‘string’ is not assignable to type ‘number’.
56 proportion=”25″
~~~~~~~~~~~~~~~
src/app/product/product.component.ts:15:18
15 templateUrl: ‘./product.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ProductComponent.
src/app/product/product.component.html:57:1 – error TS2322: Type ‘string’ is not assignable to type ‘number’.
57 slides=”5″
~~~~~~~~~~
src/app/product/product.component.ts:15:18
15 templateUrl: ‘./product.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ProductComponent.
My english is not good. I looking forward to hearing from you. Thanks!
Hi,
The images are not displayed. any clue?
you can add new images.
First of all Thank you very much of very good explanation …
I have question about ….On load page can I jump to specific slide? like I have 10 images but I want to slide to 3rd on load page….I hope you got my point.
Yes I got your point and I will update you on this.
Thanks.
I need to show 4 images at the time ..any solution plz
Okay and I will update you thanks.
¿como puedo cambiar el tamaño de 1942 x 480?
Is it useful with angular 13?
Yes
1. If ‘mat-carousel’ is an Angular component and it has ‘useMouseWheel’ input, then verify that it is part of this module.
2. If ‘mat-carousel’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.
19 [useMouseWheel]=”false”
~~~~~~~~~~~~~~~~~~~~~~~
src/app/auth/login/login/login.component.ts:6:16
6 templateUrl: ‘./login.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component LoginComponent.
I will check and update you, thanks.
how to add a click event in mat craousel slide
Property ‘slides’ does not exist on type ‘AppComponent’.ngtsc(2339)
app.component.ts(3, 47): Error occurs in the template of component AppComponent.