极客教程Angular PrimeNG旋转木马自动播放和圆形
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。这篇文章将向我们展示如何在Angular PrimeNG中使用基本旋转木马。
Angular PrimeNG Basic Carousel是用来渲染基本的旋转木马。旋转木马是一个滑块类型的组件，提供了高度的自定义功能。
Angular PrimeNG Carousel自动播放和循环：为了自动滚动Carousel，我们可以在属性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步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：它将看起来像如下。
例子1：在这个例子中，我们将学习autoplayInterval属性。
app.component.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
.product-item-content {
border: 1px solid var(--surface-d);
border-radius: 3px;
margin: 0.3rem;
text-align: center;
padding: 2rem 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);
}
h3{
color:red;
text-align: center;
}
app.component.ts
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:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
alt: 'Cascading Style Sheet',
title: 'CSS'
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
alt: 'Angular for Front end',
title: 'Angular'
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
alt: 'Java Programming Language',
title: 'Java'
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
alt: 'HyperText Markup Language',
title: 'HTML'
},
];
}
app.module.ts
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
<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
.product-item-content {
border: 1px solid var(--surface-d);
border-radius: 3px;
margin: 0.3rem;
text-align: center;
padding: 2rem 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);
}
h3{
color:red;
text-align: center;
}
app.component.ts
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:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
alt: 'Cascading Style Sheet',
title: 'CSS'
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
alt: 'Angular for Front end',
title: 'Angular'
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
alt: 'Java Programming Language',
title: 'Java'
},
{
previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
alt: 'HyperText Markup Language',
title: 'HTML'
},
];
}
app.module.ts
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 { }
输出:
