如何在 Angular 中实现 PrimeNG 样式类以自定义轮播组件

Question

我想使用PrimeNG的轮播组件并对其进行自定义。如何将其实现到我的 HTML 代码中？

我已经通过Stackoverflow和其他网站遵循了一些建议，以帮助声明样式类，这要归功于CSS文件:host >>> .ui-carousel。但是，我找不到在我的 HTML 文件上正确使用的方法。

CSS代码

    :host >>> .ui-carousel {
      width: 100%;
    }
    :host >>> .ui-carousel-item {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 250px;
    }
    :host >>> .ui-carousel-items{
      width: 100%;
    }
    :host >>> .ui-carousel-viewport{
      width: 100%;
    }
    :host >>> .ui-carousel-header{
      background-color: #007aff;
    }

网页代码

    <p-carousel styleclass="ui-carousel-header" headerText="Items">
    </p-carousel>
    <p-carousel styleclass="ui-carousel-viewport">
      <p-carousel styleclass="ui-carousel-items">
         <p-carousel styleclass="ui-carousel-item" *ngFor="let item of items">
           <img style="height: 100%;" src="{{item.picture}}">
         </p-carousel>
      </p-carousel>
    </p-carousel>

我最终想要的只是轮播的视口部分并隐藏标题（我已经找到了一种方法，但尚未应用它）并在其他地方使用导航按钮。使用我这里的代码，会出现两个标题，但视口中没有填充图片。

使用 ： 角度 7

Answer 1

我不

明白你在做什么。为什么要使用多轮播和嵌套的 p 轮播???您需要使用 ng-template 并设置 numVisible="1" 以适合项目宽度 100%

<p-carousel headerText="Items" [value]="items" numVisible="1">
    <ng-template let-item pTemplate="item">
        <img style="height: 100%;" [src]="item.picture" >
    </ng-template>
</p-carousel>

和 CSS 正常

.ui-carousel {
      width: 100%;
    }
    .ui-carousel-item {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 250px;
    }
    .ui-carousel-items{
      width: 100%;
    }
    .ui-carousel-viewport{
      width: 100%;
    }
   .ui-carousel-header{
      background-color: #007aff;
    }

在这里演示