Primeng carousel diferent height for carousel items

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%;
}





Continue reading...