Angular PrimeNG Carousel AutoPlay и Circular
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Эта статья покажет нам, как использовать Basic Carousel в Angular PrimeNG.
Angular PrimeNG Basic Carousel используется для рендеринга базовой карусели. Карусель — это компонент слайдера, который предлагает широкие возможности настройки.
Angular PrimeNG Carousel Autoplay и Circular: для автоматической прокрутки карусели мы можем определить время в свойстве autoplayInterval. Время в миллисекундах. Кроме того, для бесконечной прокрутки необходимо включить циклическое свойство. Обратите внимание, что в режиме автовоспроизведения цикл включен по умолчанию.
Синтаксис:
<p-carousel [value]="..." [autoplayInterval]="3000" [circular]="true"> <ng-template let-item pTemplate="item"> Content to display </ng-template> </p-carousel>
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Это будет выглядеть следующим образом:
Пример 1: В этом примере мы узнаем о свойстве autoplayInterval.
app.component.html
HTML
< div id = "GFG" > < h1 style = "color:green;" >GeeksforGeeks</ h1 > < h2 >Angular PrimeNG Carousel Autoplay </ h2 > < div style = "width:80%;" > < p-carousel [value]="images" [autoplayInterval]="1000"> < ng-template let-images pTemplate = "item" > < div class = "product-item" style = "width:80%" > < div class = "product-item-content" > < img [src]="images.previewImageSrc" style = "overflow: hidden;background-repeat: no-repeat;" width = "100%" height = "100%" [alt]="images.alt" [title]="images.title"> </ div > </ div > </ ng-template > </ p-carousel > </ div > </ div > |
app.component.css
CSS
.product-item-content { border : 1px solid var(--surface-d); border-radius: 3px ; margin : 0.3 rem; text-align : center ; padding : 2 rem 0 ; background-color : snow; } .product-image { width : 50% ; box-shadow: 0 3px 6px rgba( 0 , 0 , 0 , 0.16 ), 0 3px 6px rgba( 0 , 0 , 0 , 0.23 ); } h 3 { color : red ; text-align : center ; } |
app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ] }) export class AppComponent { title = "GFG" ; images: any[] = [ { previewImageSrc: thumbnailImageSrc: alt: "Cascading Style Sheet" , title: "CSS" }, { previewImageSrc: thumbnailImageSrc: alt: "Angular for Front end" , title: "Angular" }, { previewImageSrc: thumbnailImageSrc: alt: "Java Programming Language" , title: "Java" }, { previewImageSrc: thumbnailImageSrc: alt: "HyperText Markup Language" , title: "HTML" }, ]; } |
app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { AppComponent } from "./app.component" ; import { CarouselModule } from "primeng/carousel" ; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, CarouselModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Пример 2: В этом примере мы узнаем о циклическом свойстве.
app.component.html
HTML
< div id = "GFG" style = "50%" > < h1 style = "color:green" >GeeksforGeeks</ h1 > < h2 >Angular PrimeNG Carousel Circular</ h2 > < div style = "width:50%;" > < p-carousel [value]="images" [circular]="true"> < ng-template let-images pTemplate = "item" > < div class = "product-item" style = "width:80%" > < div class = "product-item-content" > < img [src]="images.previewImageSrc" style="overflow: hidden; background-repeat: no-repeat;" width = "100%" height = "100%" [alt]="images.alt" [title]="images.title"> </ div > </ div > </ ng-template > </ p-carousel > </ div > </ div > |
app.component.css
CSS
.product-item-content { border : 1px solid var(--surface-d); border-radius: 3px ; margin : 0.3 rem; text-align : center ; padding : 2 rem 0 ; background-color : snow; } .product-image { width : 50% ; box-shadow: 0 3px 6px rgba( 0 , 0 , 0 , 0.16 ), 0 3px 6px rgba( 0 , 0 , 0 , 0.23 ); } h 3 { color : red ; text-align : center ; } |
app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ] }) export class AppComponent { title = "GFG" ; images: any[] = [ { previewImageSrc: thumbnailImageSrc: alt: "Cascading Style Sheet" , title: "CSS" }, { previewImageSrc: thumbnailImageSrc: alt: "Angular for Front end" , title: "Angular" }, { previewImageSrc: thumbnailImageSrc: alt: "Java Programming Language" , title: "Java" }, { previewImageSrc: thumbnailImageSrc: alt: "HyperText Markup Language" , title: "HTML" }, ]; } |
app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { AppComponent } from "./app.component" ; import { CarouselModule } from "primeng/carousel" ; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, CarouselModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Ссылка: http://primefaces.org/primeng/carousel