Home > Software engineering >  Dots instead lines in the carousel indicators - primeng
Dots instead lines in the carousel indicators - primeng

Time:11-09

I am developing a carousel, but I want the indicators won't be lines, I want the indicatos will be small dots. The answer is in the css files, but I dont know How I can work with this, I think I must create a css class but I dont sure, could you help me? I leave an image like references, the code I am using, and the documentation of the carousel I am using. Thanks in advance.

This is the image:

enter image description here

This is the code:

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

Documentation: enter image description here

  • Related