Я реализовал карусель с помощью PrimeNG, которая выглядит как это.
Обратите внимание на стиль карусельных индикаторов и навигаторов. Я хочу иметь стиль индикаторов/навигаторов по умолчанию для карусели, например это
Я добавил импорт для CarouselModule и ButtonModule в свой файл module.ts, но он не работает. Возможно ли это с помощью 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>```
Убедитесь, что у вас есть тема Primeng в файле angular.json
Вы можете загрузить массив стилей из файла 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 {
}
Я попытался добавить PrimeIcons в свой файл модуля, но это дает мне ошибку компиляции JIT. Это правильный импорт? импортировать { PrimeIcons } из 'primeng/api';
У вас нет темы Primeng, вам нужно добавить эту тему "node_modules/primeng/resources/themes/saga-blue/theme.css"
Это мой массив стилей из angular.json "styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/ngx-toastr/toastr.css", " node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/primeng/resources/primeng.min.css", "src/styles.scss"]