如何将PrimeNG Carousel轮播组件的指示器从线条改为小圆点样式？

实现步骤 #

1. 给Carousel组件添加自定义类，避免样式污染其他轮播组件
   将你代码中<p-carousel>标签的class属性修改如下，其余模板内容保持不变即可：

<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="responsiveOptions" class="custom-dot-carousel">
    <ng-template pTemplate="header">
    </ng-template>
    <ng-template let-product pTemplate="item">
        <div class="product-item">
            <div class="product-item-content">
                <div class="p-mb-3">
                    <img src="assets/showcase/images/demo/product/{{product.image}}" [alt]="product.name" class="product-image" />
                </div>
                <div>
                    <h4 class="p-mb-1">{{product.name}}</h4>
                    <h6 class="p-mt-0 p-mb-3">${{product.price}}</h6>
                    <span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
                    <div class="car-buttons p-mt-5">
                        <p-button type="button" styleClass="p-button p-button-rounded p-mr-2" icon="pi pi-search"></p-button>
                        <p-button type="button" styleClass="p-button-success p-button-rounded p-mr-2" icon="pi pi-star"></p-button>
                        <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-carousel>

2. 添加对应CSS样式

• 如果你要在当前组件的CSS文件里写样式，需要加::ng-deep前缀穿透Angular的组件样式隔离：

/* 调整指示器项间距 */
::ng-deep .custom-dot-carousel .p-carousel-indicators .p-carousel-indicator {
  margin: 0 4px;
}

/* 把默认横线改成圆点，设置未激活状态样式 */
::ng-deep .custom-dot-carousel .p-carousel-indicators .p-carousel-indicator button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e0e0e0;
  border: none;
  transition: background-color 0.3s ease;
}

/* 激活状态圆点样式 */
::ng-deep .custom-dot-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #2196F3;
  opacity: 1;
}

• 如果你把样式写到全局样式文件（通常是src目录下的styles.css/styles.scss），可以去掉::ng-deep前缀，直接写即可。

你可以根据自身设计需求调整圆点的宽高、颜色、间距参数，适配页面风格。

内容的提问来源于stack exchange，提问作者Fabian Rico