Carousel items overlapping

[odedBartov]

i did everything like in the demo but the items in the carousel appears in on each other in one layout and there is no scrolling right or left at all. what should i do???

[replygirl]

@odedBartov What framework are you using? What OS is this on?

We use Angular and had this issue on iOS, and crashes in some instances on Android. The solution in the demo docs, where it says:

Please note that you need to assign your data-array to both the Carousel using the items property, and the CarouselItem using the *ngFor="let item of myData" directive.

[FunnyGhost]

I also have this issue. My carousel looks like this: <Carousel #imageCarousel [showIndicator]="false" [items]="car.imageUrls" debug="true"> <CarouselItem *ngFor="let url of car.imageUrls" (tap)="zoomImage()"> <Image [src]="url" iosOverflowSafeArea="true" stretch="aspectFill"></Image> </CarouselItem> </Carousel>

and it's inside a GridLayout: <GridLayout rows="*,auto" *ngIf="vm$|async as vm">

what I discovered is that if I remove the asynchronousity and I just render the Carousel, it works. The moment I use an async observable, it shows all images one on top of the other and there is not pageChanged event triggered.

With debug mode, this is what I get: CONSOLE LOG: NativeScript-Carousel DEBUG: createNativeView size 390 844 CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: initNativeView <DKCarouselView: 0x7fe04c676200; frame = (0 0; 390 844); clipsToBounds = YES; layer = <CALayer: 0x600002e20b00>> CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: createNativeView <DKCarouselView: 0x7fe04c676200; frame = (0 0; 390 844); clipsToBounds = YES; layer = <CALayer: 0x600002e20b00>> CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: refresh() CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: Using generic-mode CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: children count: 0 CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: items set: 0 CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: onLoaded() CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: refresh() CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: Using generic-mode CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: children count: 0 CONSOLE LOG: --------------------------------------------------- CONSOLE LOG: NativeScript-Carousel DEBUG: items set: 0 CONSOLE LOG: ---------------------------------------------------

I tried instead giving it a hardcoded set of items. Same thing happens. If I wait for an async call, it stops working.

I also tried using directly the example from the docs. Still didn't work.

[FunnyGhost]

@odedBartov What framework are you using? What OS is this on?

We use Angular and had this issue on iOS, and crashes in some instances on Android. The solution in the demo docs, where it says:

Please note that you need to assign your data-array to both the Carousel using the items property, and the CarouselItem using the *ngFor="let item of myData" directive.

I tried exactly the example in the docs. Same thing happened. The NS version is: 7.0.11 Angular: 10.2.1 iOS: 14.2

[standevo]

I solved it by using:

@ViewChild("carousel", { static: false }) carousel: ElementRef<Carousel>;

...
this.data = < my new data >;

setTimeout(() => {
  this.carousel.nativeElement.refresh();
});