轮播指示器中的点代替线 - primeng

Question

我正在开发一个轮播，但我希望指示器不是线条，我希望指示器是小点。答案在 css 文件中，但我不知道如何使用它，我想我必须创建一个 css 类，但我不确定，你能帮助我吗？我留下一个图像，如参考文献、我正在使用的代码以及我正在使用的轮播的文档。预先感谢。

这是图片：

这是代码：

<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="responsiveOptions" class="I`m not sure if this declaration is OK">
    <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>

文档： https://www.primefaces.org/primeng/showcase/#/carousel

Answer 1

查找主题文件：

https://github.com/primefaces/primeng/blob/master/src/assets/components/themes/saga-blue/theme.css

在该文件中有一条规则

.p-carousel .p-carousel-indicators .p-carousel-indicator button

，位于第 1 行。 ~2235，改为：

.p-carousel .p-carousel-indicators .p-carousel-indicator button {
    background-color: #e9ecef;
    width: 1rem;
    height: 1rem;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    border-radius: 50%;
}

注意：有许多主题可以更改全部或您正在使用的主题。 https://github.com/primefaces/primeng/tree/master/src/assets/components/themes

结果将如下所示：

Answer 2

如果您的主动指示灯不起作用，您可以通过这种方式区分主动指示灯的颜色。就我而言，它是红色的：

.p-carousel .p-carousel-indicators .p-carousel-indicator button {
    background-color: #e9ecef;
    width: 1rem;
    height: 1rem;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    border-radius: 50%;
}

.p-carousel .p-carousel-indicators li[data-p-highlight="true"] button {
    background-color: red;
    width: 1rem;
    height: 1rem;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    border-radius: 50%;
}