gabrielbusarello / material2-carousel Goto Github PK

I used the code from your component.html, just have slidesList.length > 30

In the original project, which this project was derived from, there was similar requirement issued gbrlsnchs#1.
It would be nice to have the option to display variable number of slides inside container.

Here is an example of another library, just to get the idea:
https://www.primefaces.org/primeng/showcase/#/carousel

I used the default example and when I removed *ngFor.
as :

<mat-carousel
....params
>
  <mat-carousel-slide > first slide  </mat-carousel-slide>

  <mat-carousel-slide> second slide  </mat-carousel-slide>
</mat-carousel>

I got an error :

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'.. Find more at https://angular.io/errors/NG0100

my goal was to make a certain number of slides without using a loop.

Can I solve this error locally?

Thank for your help

I believe that we need to update this to @angular/core as that's how this import should be. I have seen in multiple modules and I think it's moved there. Can we get it updated or should I create a PR for that?

Any plans to support Angular 11 (and beyond)? I'm in the process of upgrading to Angular 11 and I get the following when trying to upgrade Angular Material:
Package "@ngbmodule/material-carousel" has an incompatible peer dependency to "@angular/material" (requires "^10.0.1", would install "11.2.10")

Thanks for keeping this project alive!

Is there some function to specify the slide index programatically?

i need change left 50%

but .carousel-indicators li{ or .carousel-indicators{
in css not working ;C

impossible to set a custom height to the carroussel

In the doc, there is no straight-forward guideline about overriding the back and forward icons. So I jumped into the source code and found out that you need to pass an object to svgIconOverrides attribute.

Hello,
When trying demo example I got this issue: https://gabrielbusarello.github.io/material2-carousel/
Type 'string' is not assignable to type 'number'.
Error occurs in the template of component CitationComponent.
src/app/citation/citation.component.html:9:5 - error TS2322: Type 'string' is not assignable to type 'number'.

9     interval="5000"
      ~~~~~~~~~~~~~~~

  src/app/citation/citation.component.ts:5:16
    5   templateUrl: './citation.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CitationComponent.
src/app/citation/citation.component.html:10:5 - error TS2322: Type 'string' is not assignable to type 'number'.

10     slides="3"
       ~~~~~~~~~~

  src/app/citation/citation.component.ts:5:16
    5   templateUrl: './citation.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CitationComponent.

Code:
<mat-carousel
timings="250ms ease-in"
[autoplay]="true"
proportion="25"

interval="5000"
slides="3"
color="accent"
maxWidth="100%"

[loop]="true"
[hideArrows]="false"
[hideIndicators]="false"
[useKeyboard]="true"
[useMouseWheel]="true"
orientation="ltr"
            [maintainAspectRatio]="false"

<mat-carousel-slide
  #matCarouselSlide 
  *ngFor="let slide of this.SeuleCitation.images; let i = index"
  [image]="slide"
  
  overlayColor="#00000040"
  [hideOverlay]="false"
>
</mat-carousel-slide>
</mat-carousel>

Any plans for Angular 12 support?

npm ERR! Could not resolve dependency:
npm ERR! peer @angular/material@"^10.0.1" from @ngbmodule/[email protected]

ERROR in node_modules/@ngbmodule/material-carousel/lib/carousel.module.d.ts:2:10 - error TS2305: Module '"@angular/compiler/src/core"' has no exported member 'ModuleWithProviders'.

2 import { ModuleWithProviders } from '@angular/compiler/src/core';
~~~~~~~~~~~~~~~~~~~

I am using Angular version 14+. Please help me resolve the issue.

When I try to scroll the page in carousel area, unnecessary horizontal scroll of the slide occurs.

The component will not build in Angular 14. I get the following errors. I created a new app with Angular 14 cli..

`./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):                                       
Error: Emit`
                    

Error: Failed to initialize Angular compilation - The target entry-point "@ngbmodule/material-carousel" has missing dependencies:         
 - @angular/compiler/src/core`

Note that it looks like the path @angular/compiler/src/core no longer exists under node_modules in Angular 14. Instead the typings seem to be aggregated in index.d.ts is at the root of @angular/compiler.

@gabrielbusarello Can you please publish version 0.7.2 to npm registry?

I was trying to run the demo app. but I am getting this error in the demo app.module file in vs code.
Value at position 6 in the NgModule.imports of AppModule is not a reference
Value could not be determined statically. If I remove forRoot() the error disappears.

I want to know if I can put the event click in angular 14.2.0 in slide or know, if already exist some function that do this?
for example, look the picture.

Is it possible to enable click event on each slide or image? My requirement is that once users clicks on image or slide, it should do some function like opening another page.

Am I missing something?

Thanks in advance.

The active carousel indicator doesn't change, unless I hover on the slide

@gabrielbusarello

we have issue with import, file https://github.com/gabrielbusarello/material2-carousel/blob/master/projects/carousel/src/lib/carousel.module.ts

error message during npm install:
error: node_modules/@ngbmodule/material-carousel/lib/carousel.module.d.ts:2:10 - error TS2305: Module '"@angular/compiler/src/core"' has no exported member 'ModuleWithProviders'.
2 import { ModuleWithProviders } from '@angular/compiler/src/core';

can this import be changed to "from '@angular/core'"?

The npm update over the weekend did not resolve the build errors for angular 13

Error: node_modules/@ngbmodule/material-carousel/lib/carousel.module.d.ts:2:10 - error TS2305: Module '"@angular/compiler/src/core"' has no exported member 'ModuleWithProviders'.

2 import { ModuleWithProviders } from '@angular/compiler/src/core';

Not able to get the forward and back arrows to show. Only the text placeholders.
Using in project with latest Angular.
Thanks for any assistance.

does anyone have a complete example using this component where the images aren't stretched out to the entire width of the carousel? i've been fighting with trying to show the images but they are stretched across the entire carousel and there's no relevant documentation on how to fix or manipulate it.

Thank you

I have installed material2-carousel on angular13, but i have this error when running "npm run build":

Error: node_modules/@ngbmodule/material-carousel/lib/carousel.component.d.ts:62:25 - error TS2304: Cannot find name 'MouseWheelEvent'.

62 onMouseWheel(event: MouseWheelEvent): void;

Hi, I'm facing "cannot find name 'MouseWheelEvent'." issue when using this in my Angular 13 project. Also facing in Angular 12 too. Can anyone please help me out?

It would be nice to have an option to set a slide caption.

Here is an example of another library, having captions in image gallery:

https://www.primefaces.org/primeng/showcase/#/galleria/caption

I had issues over writing the background-size so i just went into the module is switched it from cover to contain
Though I think it would be a nice feature if you could just put that into the HTML

I can't only swipe the sliders on mobile, but the other functions work well.
I am using this library on Angular version 11.

If you import this module and compile with Angular Universal Server Side Rendering, then the project does not work, the website does not charge in the browser.

Need just to change in carousel.component.ts on line 239:
public onMouseWheel(event: MouseWheelEvent): void {
to
public onMouseWheel(event: WheelEvent): void {

I have done everything as documented but I don't see the arrows. Am i doing something wrong.

Here is what I have done

<mat-carousel timings="250ms ease-in" [autoplay]="true" interval="3000" color="accent" maxWidth="auto" slides="suggestedUserPhotos?.length" maintainAspectRatio="false" proportion="100" [loop]="true" [hideArrows]="false" [hideIndicators]="false" [useKeyboard]="true" [useMouseWheel]="false" orientation="ltr" > <mat-carousel-slide #matCarouselSlide *ngFor="let slide of suggestedUserPhotos; let i = index" [image]="slide.url" overlayColor="#00000040" [hideOverlay]="true" ></mat-carousel-slide>

i am receiving this error when running npm i (Angular 13):

While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/material
npm ERR!   @angular/material@"13.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/material@"^10.0.1" from @ngbmodule/[email protected]
npm ERR! node_modules/@ngbmodule/material-carousel
npm ERR!   @ngbmodule/material-carousel@"0.7.2" from the root project

i had to use --force to make it work temporary, it is better to be fixed from package itself.

So when adding the line MatCarouselModule.forRoot() into the app module imports it produces a compile time error:

Value at position 7 in the NgModule.imports of AppModule is not a reference
Value could not be determined statically.(-991010)
app.module.ts(30, 5): Unable to evaluate this expression statically.
app.module.ts(30, 5): A value for 'forRoot' cannot be determined statically, as it is an external declaration.

Hello,

i'm not able to use the swipe function, it seems not working on pc browser and mobile.

I am using angular 9

Hi,
I am facing the same issue as described in this issue gbrlsnchs#45
on the original module.

Would it be possibile to fix it? In the pull request ralftar@728b9ae they suggest it to call slideTo(0) only if width changes, or maybe to connect it to the maxWidth attribute set to a value?

Hi,

Do we have slideto functionality supporting this module.

Thanks

no attention to issues, no answers. pool requests pending... sad
@gabrielbusarello are you still here? Would you please complete pool requests.

run : >npm install --save @ngbmodule/material-carousel
Got :
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/animations
npm ERR! @angular/animations@"^14.0.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/animations@"^10.0.0 || ^11.0.0-0" from @angular/[email protected]
npm ERR! node_modules/@angular/material
npm ERR! peer @angular/material@"^10.0.1" from @ngbmodule/[email protected]
npm ERR! node_modules/@ngbmodule/material-carousel
npm ERR! @ngbmodule/material-carousel@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Daniel\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Daniel\AppData\Local\npm-cache_logs\2022-08-28T15_00_53_210Z-debug-0.log

Can you help me ?

thanks,