PrimeNG Carousel 的指示器和分页器样式

Question

我已经使用 PrimeNG 实现了一个轮播，看起来像 this

注意轮播指示器和导航器的样式。我想为 this

这样的轮播设置默认样式 indicators/navigators

我在 module.ts 文件中添加了 CarouselModule 和 ButtonModule 的导入，但它不起作用。这可能使用 CSS 或任何其他方式吗？

PrimeNG 文档 - https://www.primefaces.org/primeng/carousel

我的代码：

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

Answer 1

请检查 angular.json 文件中是否有 primeng 主题
您可以从 angular.json 文件上传样式数组吗？

将主题添加到 angular.json

中的样式数组

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

要使用 css 编辑导航器图标，您可以使用：

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

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

PrimeNG Carousel 的指示器和分页器样式

Indicators and Paginator styling for PrimeNG Carousel

html

css

angular

angularjs

primeng