Карусельный компонент Angular PrimeNG

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы увидим компонент карусели Angular PrimeNG.

Карусель — это компонент слайдера контента, в котором массив данных отображается последовательно либо вручную, либо автоматически. Карусель в Angular PrimeNG обеспечивает отличную настройку, которую можно использовать для создания динамических каруселей.

Карусель имеет следующие компоненты, которые можно использовать для создания слайд-шоу.

• Basic: это самый простой тип карусели, куда мы помещаем данные, и они отображаются в скользящей форме.
• Вертикаль : можно использовать вертикальную карусель, установив вертикальную ориентацию.
• autoplay : Установив autoplayInterval, мы можем заставить карусель скользить автоматически.
• круговой : если мы установим для кругового значение true, карусель будет бесконечно прокручивать содержимое, зацикливаясь.
• Элементов на странице: количество элементов определяется переменной numVisible, которая показывает количество элементов одновременно.
• Элементы прокрутки: количество элементов для прокрутки определяется свойством numScroll .
• Отзывчивый: для адаптивного дизайна нам нужно передать набор responsiveOptions компоненту, в котором элементы прокрутки и элементы на странице определяются точками останова.
• Верхний и нижний колонтитулы: мы можем использовать шаблоны верхнего и нижнего колонтитула с каруселью для отображения дополнительных деталей.
• Ориентация: направление карусели можно изменить на вертикальное или горизонтальное, установив свойство ориентации. Значение по умолчанию — горизонтальное.
• Свойства. Карусель Angular PrimeNG поддерживает различные свойства, которые можно использовать для создания расширенной и привлекательной галереи контента с лучшим пользовательским интерфейсом.
• Шаблоны: он используется для создания различных шаблонов/дизайнов для карусели. Он может предоставлять заголовки, нижние колонтитулы, подписи и т. Д. К карусели.
• Стилизация : компонент карусели позволяет нам создавать для него пользовательские стили, используя несколько предопределенных классов. Эти классы можно использовать для настройки верхних и нижних колонтитулов, подписей и т. д. для компонента.
• События : компонент карусели может инициировать некоторые события на основе некоторых действий пользователя, чтобы данные или дизайн могли быть соответствующим образом изменены и отображать соответствующие результаты.

Синтаксис: Создайте карусель следующим образом:

• Импортируйте модуль:

import {CarouselModule} from "primeng/carousel";

• Реализуйте это с помощью p-carousel:

<p-carousel [value]="items">
    <ng-template let-item pTemplate="item">
        <!-- Content -->
    </ng-template>
</p-carousel>

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular с помощью следующей команды:

ng new geeks_angular

Шаг 2: После создания папки вашего проекта, например, geeks_angular, перейдите к ней с помощью следующей команды.

cd geeks_angular

Шаг 3: Установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: Структура проекта будет выглядеть следующим образом:

Пример 1. В следующем примере у нас есть простая карусель с некоторыми данными.

• app.component.html

• app.component.ts

• app.module.ts

Выход:

Пример 2. В следующем примере у нас включены автовоспроизведение и циклическое воспроизведение.

• app.component.html

• app.component.ts

• app.module.ts

Выход:

Ссылка: http://primefaces.org/primeng/carousel