The first image is what I am getting currently and second is what I actually want
First:-
Second:-
<mat-card class="carousel-data">
<mat-grid-list cols="2" rowHeight="30px" class="carousel-data" *ngFor="let data of resource let i = index;" (click)="showdata()" >
<mat-grid-tile>
<img class="m-t-0 m-b-0 "[src]="data.img" alt="" width="24">
<div class="prof-left" style="margin-left: 10px;">
<p class="m-t-0 m-b-0 bank-name">{{ data.bank_name}}</p>
<p class="m-t-0 m-b-0 bank-account">{{ data.account_number }}</p>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="prof-right">
<p class="m-t-0 m-b-0 total-bal">Total Bal</p>
<p class="m-t-0 m-b-0 total-amount">{{ data.amount }}</p>
</div>
</mat-grid-tile>
</mat-grid-list>
</mat-card>
You can use OWl Carousel for that something like
<div class="owl-carousel owl-theme">
<div class="item" *ngFor="let data of resource let i = index;">
<mat-grid-list cols="2" rowHeight="30px" class="carousel-data" (click)="showdata()" >
<mat-grid-tile>
<img class="m-t-0 m-b-0 "[src]="data.img" alt="" width="24">
<div class="prof-left" style="margin-left: 10px;">
<p class="m-t-0 m-b-0 bank-name">{{ data.bank_name}}</p>
<p class="m-t-0 m-b-0 bank-account">{{ data.account_number }}</p>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="prof-right">
<p class="m-t-0 m-b-0 total-bal">Total Bal</p>
<p class="m-t-0 m-b-0 total-amount">{{ data.amount }}</p>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
</div>
in your componenet
ngAfterViewInit(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
}
Check this demo to see how to use with angular
note you have to include jquery and owl carousel file to make it work
Or you can use ngx-owl-carousel