purple dots instead blue lines in the indicators of the carousel - primeng

user_11672259 0
Viewed 260

I am developing a card carousel, but I want the indicators won't be blue lines, I want the indicatos will be small purple dots. I think the answer is in the indicatorStyleClass, 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 I am using

<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="responsiveOptions" [indicatorStyleClass]="I`m not sure if this declaration is OK">
    <ng-template pTemplate="header">
        <h5>Basic</h5>
    </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>

And this is the web page of the carousel and its documentation: https://www.primefaces.org/primeng/showcase/#/carousel

primeng angular css
3 Answers

Try to change the background color of button.p-link in your CSS file.

button.p-link {
    background-color: purple;
}

enter image description here

user_164078930

After a lot of fighting, hating and questioning the existence of God, I managed to change it by simply changing the order of calling the css files in angular.json killing the local server, running an npm intall and uploading the server again.

Although, I think npm install would be unnecessary

angular.json

 "styles": [
          "node_modules/primeicons/primeicons.css",
          "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
          "node_modules/primeng/resources/primeng.min.css",
          "src/styles.css",
          "src/styles.scss"
        ],

styles.css

 button.p-link{
    color: var(--dark-green-02) !important;
 }
user_125183610

To "override a class, you can add a class to your carousel

<p-carousel class="custom" ...>

Then you can change the class indicate this class.

In "styles.css" (or styles.scss if you use it), e.g.

//see that not only write 
//.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button
//else add .custom to override the class

.custom .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: purple;
}
.custom .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: 1rem;
}

See a stackblitz

user_85581860
Related