Indicators and Paginator styling for PrimeNG Carousel

Issue

I have implemented a carousel using PrimeNG which looks like this

Notice the style of the carousel indicators and navigators. I want to have the default style of indicators/navigators for the carousel like this

I have added the imports for CarouselModule and ButtonModule in my module.ts file but it does not work. Is this possible using CSS or any other way?

PrimeNG Documentation - https://www.primefaces.org/primeng/carousel

My code:

app.component.html

            <p-carousel
              [value]="planDetails"
              styleClass="custom-carousel"
              [numVisible]="3"
              [numScroll]="1"
              [circular]="true"
              [autoplayInterval]="3000"
            >
              <ng-template let-plan pTemplate="item">
                <div class="centered-div">
                  <div class="plans">
                    <div class="card plan-card">
                      <div class="card-content">
                        <div class="plan-name">{{ plan?.planName }}</div>
                        <div class="plan-desc">
                          {{ plan?.description }}
                        </div>
                        <div class="plan-price">
                          <span class="plan-cost"
                            >$ {{ plan?.pricePerUser }}
                            <span>
                              <sup class="plan-currency">{{
                                plan?.currency
                              }}</sup>
                            </span></span
                          >
                        </div>
                        <div class="billing-way">per user billed annually</div>

                        <div class="plan-upgrade-btn">
                          <button
                            type="button"
                            class="remediator-blue-btn change-btn"
                          >
                            <span class="button-text" (click)="onUpgrade(plan)">
                              Select
                            </span>
                          </button>
                        </div>

                        <hr />

                        <div class="plan-features">Features</div>
                        <div class="plan-feature-1">
                          <img
                            src="assets/images/orange-check.svg"
                            alt=""
                            class="feature-check"
                          />
                          <span class="feature-text"
                            >Daily search limit -
                            {{ plan.dailySearchLimit }}</span
                          >
                        </div>
                        <div class="plan-feature-1">
                          <img
                            src="assets/images/orange-check.svg"
                            alt=""
                            class="feature-check"
                          />
                          <span class="feature-text"
                            >Maximum searches - {{ plan.maxSearches }}</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </ng-template>
            </p-carousel>
          </div>```

Solution

Please check that you have the primeng theme in angular.json file
can you upload the styles array from your angular.json file ?

add the theme to the styles array in angular.json

"node_modules/primeng/resources/themes/saga-blue/theme.css"

to edit the navigators icons with css you can use this:

::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {
  
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next {
    
  }

Answered By - yoelb00