Closed e-Naeim closed 1 year ago
Flickity is a very good carousel, but I'm having an issue using it in angular
when using static data it works good (sometimes it's not showing properly and after reloading it works)
but when using a dynamic data returned from a service it shows all slides and images as a one block with no slides
how to fix this issue ?
code i'm using
<div class="carousel cssanimation sequence fadeInBottom" data-flickity='{"autoPlay": "10000", "wrapAround": true, "imagesLoaded": true}'> <a href="" *ngFor="let show of RecentReleases"> <img class="carousel-cell" [src]="show.largePoster" alt="poster"> <div class="movie-info d-flex flex-column align-items-start"> <p class="title">{{show.title}}</p> <div class="genres d-flex flex-row" *ngFor="let genre of show.genres"> <p class="genre">{{genre}}</p> <p class="separator">|</p> </div> </div> </a> </div>
and my ts code
RecentReleases?: IShow[]; ngOnInit(): void { this.homeService.getRecentReleases().subscribe((shows) => { this.RecentReleases = shows; }); }
I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.
Flickity is a very good carousel, but I'm having an issue using it in angular
when using static data it works good (sometimes it's not showing properly and after reloading it works)
but when using a dynamic data returned from a service it shows all slides and images as a one block with no slides
how to fix this issue ?
code i'm using
and my ts code