Primeng 旋转木马不同高度的旋转木马项目

Question

您好，我正在使用 primeng 旋转木马，但存在问题，因此旋转木马的高度始终基于最高的项目。我想为每个轮播项目设置自动高度。

这可能吗？

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

Answer 1

好的，我通过将最大高度添加到轮播项目和轮播活动项目来解决这个问题

:host  ::ng-deep .p-carousel-item{
   max-height: 0;
}
:host ::ng-deep  .p-carousel-item-active{
  max-height: 100% !important;
}

Answer 2

这对我有用。 SCSS让内层容器填满所有可用高度，轮播受父容器高度约束

::ng-deep {
  body .p-component.p-carousel.p-carousel-horizontal,
  body .p-component.p-carousel.p-carousel-horizontal .p-carousel-content,
  body .p-component.p-carousel.p-carousel-horizontal .p-carousel-content .p-carousel-container {
    height: 100%;
  }
}

Primeng 旋转木马不同高度的旋转木马项目

Primeng carousel diferent height for carousel items

html

angular

primeng