gbrlsnchs / material2-carousel Goto Github PK
View Code? Open in Web Editor NEWA carousel component for Angular using Material
Home Page: https://gsr.dev/material2-carousel
License: MIT License
material2-carousel's Issues
bugs and opinions...
Just tried to use this carousel and it looks good to me, just a few opinions and a feature request:
a) I want the photos to be contained, not to be covered, so I need an option to force
background-size: contain
instead of
background-size: cover
in the .carousel-slide css class.
b) My indicators do not appear in the center of the slides, they appear in the right half. In the css styles I see these styles:
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
If I switch off all of these, they appear where they should be.
c) I also want to configure margins for indicators. At the moment I see
.carousel-indicators {
bottom: 15px;
margin-right: 15%;
margin-left: 15%;
}
I want to switch off all of these, to have them in a good position.
d) Feature request: I want a carousel with a maximize button, just like in the slider here:
https://www.recordstores.love/56
Here you see a ninja slider with a double arrow in the bottom right corner. If you click that, the whole carousel will maximize (not just one image). I like this feature.
Please contact me if you need an example for a) to c).
Support multiple slides
As cited here, it would be nice to have support for multiple slides in a single list item.
Clicking a carousel-indicator causes page to scroll
Conditions:
- A carousel is partially hidden due to page scroll position, but the indicators are still visible.
- User clicks on an indicator.
Expected:
- Carousel jumps to the clicked slide, no other effects.
Actual:
- Carousel jumps to the clicked slide, but also forces a page scroll to the top of the carousel
The library needs to update its dependencies, correct classes and repair the problem that gestures do not work
The library is outdated with the latest Angular dependencies so it generates Log in the browser console with warnings, also npm says that Angular Material is outdated. Please update the library.
This is the warning that shows in the console of the nevagador when using the library.
Also the gestures are not working.
Support right-to-left orientation
Some users would like to use this component from right to left, sometimes because of their language or personal preference. Allow them to do so by adding an boolean rtl input property.
Does it work with Angular Universal with Server Side Render?
When I'm including CarouselComponent on MainPage of the project, it is just freeze everything. Server is not responding. There is no any warning in Node.js console.
But it works fine, when browser generate content. For example if move CarouselComponent to AboutPage, and routing from MainPage to AboutPage. But if I'm trying to refresh About (Server Side Render), same result.
ExpressionChangedAfterItHasBeenCheckedError received
I've got this error when using the carousel
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngTemplateOutlet: undefined'. Current value: 'ngTemplateOutlet: [object Object]
I have 2 components making using of the carousel. Both components are used on the same page. One of them is creating the error. Even with this simple setup:
<mat-carousel slides="1">
<mat-carousel-slide>
1
</mat-carousel-slide>
</mat-carousel>
Is there anything I'm doing wrong, or is it simply a limitation on the use of the component?
Material deep imports
In order to be compliant with Angular Material v9, the dependencies must be deeply imported, otherwise once projects update to Angular 9 and Angular Material v9, the build will break.
See https://github.com/angular/components/releases/tag/9.0.0-next.0
Can't Show images
Hello Bro
Can u help me out with this?
I pass the URL contain the image but it not work!!
Hope to hear from you soon
Get Arrows on mouse Hover
I want arrows to show up only on mouse hover on slides otherwise they remain hidden. Is that possible in any way?
orientation "ltr" is working till the last slide but not again to first slid
suppose I have 4 slides, on next the next one is loading fine, but when i reach to the fourth slide and click on next it sudden go to the first slide and sliding all the slid, i need it like 1=>2=>3=>4=>1=>2=>3=>4=>1
Getting warns from material-carousel on npm install
When I execute npm install I've been receiving these errors
npm WARN @ngmodule/[email protected] requires a peer of @angular/material@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngmodule/[email protected] requires a peer of rxjs@~6.3.3 but none is installed. You must install peer dependencies yourself.
I have @angular/[email protected] and [email protected].
Feature Request: Lazy loading on slide
can we have contents loaded when the slide is rendered?
for example, I am loading .mov file in each slide, the animation starts playing when the entire component is loaded.
In case I get an option to load animation (or any content) when the slide is rendered it would be a good feature.
Thanks in advance.
Images not displayed in Angular 8
I'm using the example from the demo website
<mat-carousel
timings="250ms ease-in"
[autoplay]="true"
interval="5000"
color="accent"
maxWidth="100%"
proportion="100"
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>And all I get is a grey background:
Here is my "slides" array:
slides = [{
image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
}, {
image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
}, {
image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
}, {
image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
}, {
image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
}];This is my first time trying to use the library, so I'm not sure if it is an Angular 8 problem, or a "me" problem. Feel free to close if it is the latter. Thanks.
Add support for number of slider item per slide.
Reference : https://codepen.io/omowunmiekun/pen/GRKPbxW
Not able to set height of material carousel.
I am using material carousel and trying to set it's height , I tried slideheight, proportion but not able to fix height . Maybe i'm missing something. Please help .
My code is:
<mat-carousel
timings="500ms ease-in"
[autoplay]="true"
interval="5000"
color="accent"
maxWidth="auto"
slides="2"
slideHeight="50vh"
[loop]="true"
[hideArrows]="false"
[hideIndicators]="false"
[useKeyboard]="true"
[useMouseWheel]="false"
<mat-carousel-slide #matCarouselSlide>
<div class="row">
<div class="col-3">
<div class="url-card"> <a href="health-details.html">
<div class="card-badge"><span class="badge badge-light">FLAPPING</span></div>
<div class="url-row">
<div class="title-block text-uppercase">indiatimes.com <span class="portnum dark-font">80</span></div>
<div class="font-normal">Sarvesh Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">IT</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">MUM-Z2</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">1 min, 6 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">Private VIP</div>
</div>
</div>
</a> </div>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</mat-carousel-slide>
<mat-carousel-slide>
<div class="row">
<div class="col-3">
<div class="url-card"> <a href="health-details.html">
<div class="card-badge"><span class="badge badge-light">FLAPPING</span></div>
<div class="url-row">
<div class="title-block text-uppercase">indiatimes.com <span class="portnum dark-font">80</span></div>
<div class="font-normal">Sarvesh Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">IT</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">MUM-Z2</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">1 min, 6 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">Private VIP</div>
</div>
</div>
</a> </div>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="col-3">
<mat-card class="url-card" >
<mat-card-content>
<div class="card-badge"><span class="badge badge-danger">DOWN</span></div>
<div class="url-row">
<div class="title-block text-uppercase">timesinternet.in <span class="portnum dark-font">80</span></div>
<div class="font-normal">Pawan Kumar</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">business</div>
<div class="dark-font text-uppercase">CORPORATE</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">location</div>
<div class="dark-font">CHN-Z1</div>
</div>
</div>
<div class="url-row row">
<div class="col p-0 text-left">
<div class="grey-small-title">SINCE</div>
<div class="dark-font">2 min, 12 secs</div>
</div>
<div class="col p-0 text-right">
<div class="grey-small-title">TYPE</div>
<div class="dark-font">CDN</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</mat-carousel-slide>
</mat-carousel>
Swipe slide not working on Angular 9
i have update my project to Angular 9, when i set enableIvy to true, swipe doesn't working anymore
Support keyboard and mousewheel navigation
As cited here, it would be nice to have support for navigating using keyboard (through arrows) and mouse (through mousewheel).
Does this lib support Angular universal?
I got this error
core.js:421 DEPRECATED: DI is instantiating a token "MatCarouselHammerConfig" that inherits its @Injectable decorator but does not provide one itself. This will become an error in v10. Please add @Injectable() to the "MatCarouselHammerConfig" class.
and it cannot route to any route use this lib(use browser). but it is can route if i route to another page then route to it use routerLink in apps.
Edit1: it is cause by autoplay attribute.
How to disable the "grab" functionality of the carousel?
Hello,
I need to be able to create a static carousel where users don't "grab" and move the slides within the angular app I am building. This app is only intended for browser platforms for an older demographic as users and they might find the "grab and drag functionality" in moving slides frustrating if the interaction is accidental. Is there any tips/tricks to disable the drag functionality?
Allow to set custom height
Right now the only way to modify the height of the rendered list of a mat-carousel is to modify the proportion, this is very bad.
In conclusion, I think this is garbage, I mean why would you adjust the bottom padding based on the [proportion] and not on height??.
Vertical scrolling not working on mobile devices
Cannot scroll to bottom or top in the carousel zone (only on mobile devices). This issue is probably due to these inline CSS rules:
touch-action: none;
user-select: none;
-webkit-user-drag: none;
Goes to first slide on window resize
Bug.
To reproduce:
- Open demo
- Go to the second slide
- Resize window
Expected behavior:
- Resizing window should not trigger sliding
Very annoying on mobile devices where the address bar is shown/hidden automatically.
Five images into carousel
Dear gbrlsnchs,
Excuse me for such a basic question.
I was able to run your code from material2-carousel while testing my app.
I am able to see 1 image running repeating itself into the carousel loop.
My question: I need to add a total of 5 images but cannot figure out where to add the other 4 links to create the loop. How do I accomplish this?
Thanks so much.
Ron
Error during template compile of 'MatCarouselHammerConfig'
I did everything you said had to be done to use this and I got that error.
new fixes about remote urls for img.
can you add changes about remote url for img to npm package ?
Thank you!
Gestures not working and warning in console.
Hi!
In your example I can use gestures for change the sliders.
But it's not working in the Angular 9. Then I see an warning in console.
I think this is what is causing the problem. If was that, I can do some tests, and submit a PR.
Ivy broke carousel?
I recently upgraded to ivy because of production reasons. And the carousel was working perfectly fine, but after the upgrade, it is in the DOM but the slides won't show up.
Can it be that ivy and the bug I experiences are related?
Can there be an array of images instead of the one on the slide in the template?
I'm a noob and feel like there must be some easy way to refer to an array of images for the carousel instead of the one image in the template slide. I tried many different things and am not ready to give it up. I love this carousel code on your github and want to use that, but I have no idea how to display multiple images. It says "slidesList" but I can't seem to get a slidesList going. At this point I'd be happy if I could create a youtube video of my slides and link it the url lol.
I saw another issue from last year mentioning multiple image functionality. Are there any updates?
There is a conflict between horizontal and vertical scroll on mobile devices.
Hello,
if there is a vertical scroll inside carousel item and user starts vertical scrolling - carousel horizontal scroll occurs.
I have two custom button Next and Previous Functionality but its not working
<div mat-dialog-content style="border: 1px solid #dcdcdc;">
<div class="demo-carousel">
<mat-carousel
#matCarousel
[timings]="timings"
[autoplay]="false"
[interval]="interval"
[loop]="false"
[hideArrows]="hideArrows"
[hideIndicators]="hideIndicators"
[color]="color"
[maxWidth]="maxWidth"
[proportion]="proportion"
[useKeyboard]="useKeyboard"
[useMouseWheel]="useMouseWheel"
[orientation]="orientation"
[slides]="slides"
(change)="onChange($event)">
<mat-carousel-slide
#matCarouselSlide
*ngFor="let slide of slidesList; let i = index"
image="{{slidesListDtls[i].image}}"
[overlayColor]="overlayColor"
[hideOverlay]="hideOverlay">
<ng-container *ngIf="showContent">
<div
style="width: 85%; text-align: center; margin-left: 8%; height: 290%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<h5><strong> {{slidesListDtls[i].title}}</strong></h5>
<p> {{slidesListDtls[i].description}}
</p>
</div>
</ng-container>
</mat-carousel-slide>
</mat-carousel>
</div>
</div>
<div mat-dialog-actions>
<div style="width: 100%; ">
<div style="width: 20%; float: left;">
<button mat-raised-button class="skipButton" [mat-dialog-close]="true" tabindex="-1">Skip</button></div>
<div style="width: 70%; float: right;">
<button mat-raised-button color="primary" class="nextButton" (click)="next()" tabindex="2">Next</button>
<button mat-raised-button class="previousButton" tabindex="1"><mat-icon _ngcontent-c13="" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">arrow_forward</mat-icon></button>
</div>
</div>
</div>
Demo of stackblitz
Can anyone make a demo in stackblitz. Some how I can't use this ..
Thanks
Multiple items on each
I need to display 3 items per slides, any help?
Always wait for animations to finish
Not waiting for animations to finish seems glitchy and takes out the fluidity when sliding. Make it permanent.
ExpressionChangedAfterItHasBeenCheckedError
Using angular 9 I get an ExpressionChangedAfterItHasBeenCheckedError.
I solved it by overriding the MatCarouselSlideComponent and adding { static: true } to the templateRef property.
This is my component:
import { Component, forwardRef, TemplateRef, ViewChild } from '@angular/core';
import { MatCarouselSlideComponent } from '@ngmodule/material-carousel';
@Component({
selector: 'agp-carousel-slide',
templateUrl: './carousel-slide.component.html',
styleUrls: ['./carousel-slide.component.scss'],
providers: [
{ provide: MatCarouselSlideComponent, useExisting: forwardRef(() => CarouselSlideComponent) }
]
})
export class CarouselSlideComponent extends MatCarouselSlideComponent {
@ViewChild(TemplateRef, { static: true }) public templateRef: TemplateRef<any>;
}It would be nice if this fix gets included in the core library so we dont have to override the component ourselves.
I want to reset the slide once I delete any slide from the slider
I want to reset the slider once I delete any slide from the slider
slideHeight input attribute value not working properly
I am just trying to use a fixed height slider with the following configuration
<mat-carousel
timings="250ms ease-in"
[autoplay]="true"
interval="50000"
color="accent"
maxWidth="auto"
maintainAspectRatio = false
slideHeight="300px"
slides=3
[loop]="true"
[hideArrows]="false"
[hideIndicators]="true"
[useKeyboard]="true"
[useMouseWheel]="false"
orientation="ltr"
it takes proportion value = 25 , and that's true,but why it takes
in carousel.component.html
Infinite slide loop
Hello! When will you implement an infinite slide loop?
mat-carousel-slide does not update when source changes.
In order to optimize my project I'm using responsive images based on the size of the screen. Currently seems like when I change the image source it does not update the mat-carousel-slide.
<mat-carousel
#carousel
[autoplay]="false"
[maintainAspectRatio]="false">
<mat-carousel-slide
*ngFor="let item of items"
[image]="item[propertyToBeUsed]"
overlayColor="#00000020">
</mat-carousel-slide>
</mat-carousel>item is an object with 3 properties, big, medium and small. It will be changed based on propertyToBeUsed, that changes based on the size of the screen.
I think this should be fixed.
Disabled property not working properly
Hi,
When disabled attribute is set to true, carousel arrows are being disabled but not carousel indicators user is able to operate through them.
Drag on mat-slider breaks when installing the carousel
After installing the module and adding to the includes section in the module file, (before importing into any components), the 'drag' function on the Material slider itself seems to stop working (can click to move the slider, but can no longer drag it). Maybe there is some clash of the classes?
Images do not load until mouseover of slide
I added the carousel to my angular 8 app, and it works great, except I noticed that the images do not appear until I mouse over a slide. Instead it loads the carousel in the correct proportions with a blank slide, like this:
The rendered html looks like this:
Once I mouseover the the slide, the image and other content load and display properly. The code for the carousel I am using is as follows
<mat-carousel
timings="500ms ease-in"
[autoplay]="false"
color="primary"
maxWidth="auto"
[maintainAspectRatio]="false"
[slideHeight]="'500px'"
proportion="25"
slides="5"
[loop]="false"
[hideArrows]="false"
[hideIndicators]="false"
[useKeyboard]="true"
[useMouseWheel]="false"
orientation="ltr"
<mat-carousel-slide [image]="'assets/images/screenshots/goals.png'" [hideOverlay]="true">
<div class="slide-caption-container">
<div class="slide-caption">
<div class="slide-header">
Goals
</div>
<div class="slide-description">
Set a long term vision for your organization and track your progress.
</div>
</div>
</div>
</mat-carousel-slide>
<mat-carousel-slide [image]="'assets/images/screenshots/rocks.png'" [hideOverlay]="true">
<div class="slide-caption-container">
<div class="slide-caption">
<div class="slide-header">
Rocks
</div>
<div class="slide-description">
Bridge the gap between where you are and where you need to be. Rocks are targeted,
90 day initiatives that focus departments towards improving in a specific,
measureable manner.
</div>
</div>
</div>
</mat-carousel-slide>
Note: I do have a workaround for this. I discovered that forcing change detection in ngAfterViewInit caused the slides to display correctly. Ideally though, this should not be required.
Click event on carousal
Glad to see carousal in material, i have a requirement like click event on carousal image, please help me out
Slide output event needed
Is there any way to get the current active slide (value)?
I need it inside the TS file.
Loop property not being respected when swiping
Conditions:
- Loop property is set to true
- User swipes right to the last slide, then swipes right once more
Expected:
- Carousel loops back to the first slide
Actual results:
- Carousel does not loop back to the first slide
Note: If user clicks the arrow, carousel loops back as expected.
The same issue applies when trying to swipe left from the first slide, carousel does not loop back to the last slide.
How to overrides icons?
Expected something like this? But not...
<ng-template svgIconOverrides="arrowBack">
<mat-icon svgIcon="custom_back"></mat-icon>
</ng-template>
<ng-template svgIconOverrides="arrowForward">
<mat-icon svgIcon="custom_forward"></mat-icon>
</ng-template>
Jump to specific slide by clicking on custom button
Scenario:
- I have multiple slides with buttons on them.
- On click of that button it should jump/navigate to specified slide.
Missing dependencie
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
export: [
...
BrowserAnimationsModule
],
...
})
Need to Change Slide Animation
how to change sliding animation effect int carousel
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.