How to create horizontal scroll with cards using *ngFor? - ionic4

Question

I'm using Ionic 4 and I'm trying to create a horizontal scroll that each item will be a card. And those cards will be displayed dynamically (with *ngFor).
I already tried something like this:
<div class="container">
<div class="scroll" scrollX="true">
<ion-card *ngFor="let item of items">
...
</ion-card>
</div>
</div>
That I searched before, but doesn't work.
What I'm expecting is something like this:
<ion-row>
<ion-item>
<ion-scroll scrollX=true"
<ion-card *ngFor="let card of cards>
<ion-card-header>
<ion-img src="..."/>
</ion-card-header>
<ion-card-content>
<p>...</p>
</ion-card-content>
</ion-card>
</ion-scroll>
</ion-item>
<ion-row>
So basically, slider of cards with *ngFor to get data from the DB. I saw that in ionic 4, ion-scroll doesn't exist anymore.

Answer 1

Thanks for the support guys. I found a solution.
.thumnails{
overflow-x: scroll;
overflow-y: hidden;
.list-thumbnail{
height: 100%;
white-space: nowrap;
.img-thumb{
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 3px;
width: 50px;
height: 50px;
margin:0 2px 0 0;
line-height: 60px;
}
}
}
::-webkit-scrollbar {
display: none;
}
<div class="thumnails">
<div class="list-thumbnail">
<div class="img-thumb" [class.selected-img]="filter.selected" *ngFor="let filter of filters">
<ion-card class="card card__full">
<ion-card-header no-padding>
<ion-img [src]="filter.url" style="width: 100%;" </ion-img>
</ion-card-header>
<ion-card-content>
<p text-center>{{filter.name}}</p>
</ion-card-content>
</ion-card>
</div>
</div>
</div>

Answer 2

.ts file
slides: any[];
constructor(public navCtrl: NavController) {
this.slides = [{
title: 'Slide 1',
content: 'Slide 1 content'
},{
title: 'Slide 2',
content: 'Slide 2 content'
},{
title: 'Slide 3',
content: 'Slide 3 content'
},{
title: 'Slide 4',
content: 'Slide 4 content'
}]
}
your-file.html
<ion-content padding>
<ion-slides pager="true">
<ion-slide *ngFor="let slide of slides">
<h1>{{ slide.title}}</h1>
<div style="display:block">
{{ slide.content }}
</div>
</ion-slide>
</ion-slides>
</ion-content>
try this solution hope it'll resolve your problem.
please have a look on this working url