Incorporating Angular 11 along with the https://www.npmjs.com/package/angular-responsive-carousel responsive carousel has been a part of my project. The carousel is filled with mat-cards through an array. However, upon initially loading the page, all the cards seem to overlap each other as displayed here
Here's how it should ideally appear: this
Interestingly, resizing the window and then reverting it back to its original size makes the carousel render correctly. I am in search of a solution that ensures the correct rendering of cards right from the beginning.
The HTML code snippet is structured like this:
<carousel [dots]="true" [cellsToShow]=cellsToShow [height]="carouselHeight" [autoplay]="false"
[autoplayInterval]="2000"
[borderRadius]="2" [pauseOnHover]="true">
<div class="carousel-cell" *ngFor="let item of cards; index as i; trackBy: fun">
<mat-card class="example-card mat-elevation-z0">
<mat-card-header>
<a mat-card-avatar class="example-header-image" [href]="telegramUrl" target="_blank"</a>
<mat-card-title><b>Latest Offers</b></mat-card-title>
<mat-card-subtitle><i>From Nerd Deals</i></mat-card-subtitle>
</mat-card-header>
<br>
<div class="example-card-image"><img mat-card-image [src]=item[0] alt=""></div>
<mat-card-content>
<div [innerHTML]="item[1]"></div>
<br>
{{item[2]}} <a href="{{item[3]}}" target="_blank">{{item[3]}}</a>
</mat-card-content>
</mat-card>
</div>
The corresponding CSS section appears as follows:
.carousel{
position: relative;
z-index: 1;
padding-left: 10%;
padding-right: 10%;
}
.carousel-cells{
height: auto !important;
}
.carousel-cell{
height: auto !important;
}
.example-card {
max-width: 70vw;
text-align: left;
overflow-wrap: break-word;
height: auto !important;
border-style: solid;
border-width: thin;
}