[FIXED] Primeng carousel diferent height for carousel items

Issue

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

enter image description here

Solution

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

Answered By – user13505963

Answer Checked By – David Goodson (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published