Indicators and Paginator styling for PrimeNG Carousel-CodePudding

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 >
                  <div >
                    <div >
                      <div >
                        <div >{{ plan?.planName }}</div>
                        <div >
                          {{ plan?.description }}
                        </div>
                        <div >
                          <span 
                            >$ {{ plan?.pricePerUser }}
                            <span>
                              <sup >{{
                                plan?.currency
                              }}</sup>
                            </span></span
                          >
                        </div>
                        <div >per user billed annually</div>

                        <div >
                          <button
                            type="button"
                            
                          >
                            <span  (click)="onUpgrade(plan)">
                              Select
                            </span>
                          </button>
                        </div>

                        <hr />

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

CodePudding user response：

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