Flickity carousel doesn't work if used (ngfor)

Question

I'm using a carousel called flickity

when I'm using static data the carousel works normally

normal behavior code:

<div class="carousel" data-flickity='{"autoPlay": "10000", "wrapAround": true, "imagesLoaded": true}'>
  <a href="">
    <img class="carousel-cell"
      src="https://149634564.v2.pressablecdn.com/wp-content/uploads/2021/08/rober-gonzalez-ShXbeohihGo-unsplash-800x550.jpg"
      alt="">
  </a>

  <a href="">
    <img class="carousel-cell"
      src="https://149634564.v2.pressablecdn.com/wp-content/uploads/2021/08/niklas-veenhuis-TEjATSCI2A4-unsplash-800x550.jpg"
      alt="">
  </a>
</div>

but when I request data then use *ngfor it shows all slides as one block, no sliding.

not working code:

  <div class="carousel cssanimation sequence fadeInBottom" #carousel
data-flickity='{"autoPlay": "10000", "wrapAround": true, "imagesLoaded": true}'>

<a href="" *ngFor="let show of RecentReleases">
  <img class="carousel-cell" [src]="show.largePoster" alt="poster">
</a> </div>

my ts code:

RecentReleases?: IShow[];

ngOnInit(): void {
  this.homeService.getRecentReleases().subscribe((shows) => {
    this.RecentReleases = shows;
  });
}

Does anyone know how to solve this?

-Edit 1: when I initialized the "RecentRleleases" with a static data it worked correctly so I think the problem in waiting the data ?

Might be due to the fact that `RecentReleases` can be null. Try to add a `*ngIf="RecentReleases"` to the parent `div`. — AsPas, Jun 21 '22 at 12:14

Zerotwelve · Answer 1 · 2022-06-21T12:14:36.163

0

Not sure but I think the code should be:

<div *ngIf="RecentReleases?.length > 0" class="carousel" data-flickity='{"autoPlay": "10000", "wrapAround": true, "imagesLoaded": true}'>
  <a href="" *ngFor="let show of RecentReleases">
    <img class="carousel-cell"
      [src]="show.largePoster"
      alt="">
  </a>
</div>

in order to reproduce the "normal behavior code"

edited Jun 21 '22 at 12:14

answered Jun 21 '22 at 12:00

Zerotwelve

2,087
1
9
24

edited the code in the question above, as I couldn't format it correctly .. I'm using the same code, i think the problem because the fetching of the data takes time, so I should wait some time before initialize the slider ? – Emad Naeim Jun 21 '22 at 12:08
yes maybe you should initialize the slider after you assign `this.RecentReleases = shows;` but maybe this fixes the problem: `
0" class="carousel" data-flickity='{"autoPlay": "10000", "wrapAround": true, "imagesLoaded": true}'>`
– Zerotwelve Jun 21 '22 at 12:14
tried it but it didn't wokr :( – Emad Naeim Jun 21 '22 at 12:25
then probably you need to initialize flickity using Javscipt instead of HTML – Zerotwelve Jun 21 '22 at 12:28
can you kindly illustrate how to do so ? thanks. – Emad Naeim Jun 21 '22 at 17:45

Eliseo · Answer 2 · 2022-06-22T06:06:37.557

0

The problem is that when you try to create the carousel, the elements are not in the screen. As Zerotwelve say you need initialize using javascript. Where? in subscribe function and enclosed in a setTimeout to give time to Angular to repaint the elements

ngOnInit(): void {
  this.homeService.getRecentReleases().subscribe((shows) => {
    this.RecentReleases = shows;
    setTimeout(()=>{
       const flkty = new Flickity( '.main-carousel', {
      // options
        cellAlign: 'left',
        contain: true
      });
      flkty.resize() //<--add this line
    })
  });
}

edited Jun 22 '22 at 06:06

answered Jun 21 '22 at 13:27

Eliseo

50,109
4
29
67

I'm trying to figure out how to use this way but it seems I can't, can you kindly illustratre it more or apply it in my code above. thanks – Emad Naeim Jun 21 '22 at 17:44
@EmadNaeim, I only follow the [document](https://flickity.metafizzy.co/) when say: "Initialize with vanilla Javascript". See a [stackblitz](https://stackblitz.com/edit/angular-ivy-prnevm?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,angular.json,src%2Fstyles.css,src%2Fpolyfills.ts,src%2Findex.html,src%2Fapp%2Fhome.service.ts) – Eliseo Jun 21 '22 at 22:18
Maybe it would be better to initialize it in `ngAfterViewInit` so you don't need a `setTimeout`, don't you think @Eliseo ? – Zerotwelve Jun 22 '22 at 05:44
@Zerotwelve, not. You need give Angular time to draw the "slider". I use a setTimeout(), you can use also [ChangeDetectorRef](https://angular.io/api/core/ChangeDetectorRef) to say Angular that "check again", But you need to have the "sliders" in the screen before create the Flickity. BTW, I update the answer adding a ` flkty.resize()` to reinit – Eliseo Jun 22 '22 at 06:06

Flickity carousel doesn't work if used (ngfor)

2 Answers2