Hi im using primeng carousel but there is problem so carousel height is always based on the highest item. I want to have automatic height for every carousel item.
Is this possible?
<p-carousel [value]="post.content" [numVisible]="1" [numScroll]="1" [circular]="true">
<ng-template let-content pTemplate="item">
<video *ngIf="content.contentType===ContentType.VIDEO" class="video" width="100%" height="auto" playsinline controls controlsList="nodownload" >
<source [src]="getContentLink(post.user.id,post.id,content.fileName)" type="video/mp4">
</video>
<img height="auto" width="100%" *ngIf="content.contentType===ContentType.PHOTO" [src]="getContentLink(post.user.id,post.id,content.fileName)"/>
</ng-template>
</p-carousel>
css
:host ::ng-deep .p-carousel {
display: flex;
flex-direction: column;
}
:host ::ng-deep .p-carousel-content {
display: flex;
flex-direction: column;
overflow: auto;
}
:host ::ng-deep .p-carousel-container {
display: flex;
flex-direction: row;
}
:host ::ng-deep .p-carousel-items-content {
overflow: hidden;
width: 100%;
}
:host ::ng-deep .p-carousel-items-container {
display: flex;
flex-direction: row;
}
:host ::ng-deep .p-carousel-vertical .p-carousel-container {
flex-direction: column;
}
:host ::ng-deep .p-carousel-vertical .p-carousel-items-container {
flex-direction: column;
height: 100%;
}
Ok so I solved it by adding max height to carousel item and carousel active item like this
:host ::ng-deep .p-carousel-item{
max-height: 0;
}
:host ::ng-deep .p-carousel-item-active{
max-height: 100% !important;
}