htmlangularprimeng

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

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