我已經使用 PrimeNG 實作了一個輪播，看起來像這樣
注意輪播指示器和導航器的樣式。我想像這樣為輪播設定默認樣式的指示器/導航器
我在我的 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>```
uj5u.com熱心網友回復：
請檢查您在 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 {
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/472459.html