Индикаторы и стиль Paginator для PrimeNG Carousel

Я реализовал карусель с помощью 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>```
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
23
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Убедитесь, что у вас есть тема 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 {
    
  }

Это мой массив стилей из angular.json "styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pin‌​k.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"]

Ritik Kothari 11.05.2022 09:26

Я попытался добавить PrimeIcons в свой файл модуля, но это дает мне ошибку компиляции JIT. Это правильный импорт? импортировать { PrimeIcons } из 'primeng/api';

Ritik Kothari 11.05.2022 09:38

У вас нет темы Primeng, вам нужно добавить эту тему "node_modules/primeng/resources/themes/saga-blue/theme.css"

yoelb00 11.05.2022 10:05

Другие вопросы по теме