极客教程Angular PrimeNG Carousel组件
Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站非常容易。它提供了大量的模板、组件、主题设计、广泛的图标库等等。在这篇文章中，我们将看到**Angular PrimeNG Carousel组件。
旋转木马是一个内容滑块组件，它可以手动或自动地按顺序显示数据阵列。Angular PrimeNG中的Carousel提供了巨大的定制功能，可以用来创建动态的carousel。
Carousel有以下组件，可用于开发幻灯片
- basic：这是最简单的旋转木马类型，我们把数据放在那里，然后以滑动的形式显示。
- vertical :通过将方向设置为垂直，可以使用垂直的旋转木马。
- autoplay：设置autoplayInterval，我们可以使旋转木马自动滑动。
- circular : 如果我们将circular设置为 “true”，旋转木马将通过循环的方式无限地滚动内容。
- Items Per Page。项目的数量是由变量numVisible定义的，它一次显示项目的数量。
- Scroll Items。这是用numScroll属性定义的要滚动的项目数量。
- Responsive。对于响应式设计，我们需要向组件传递一组responsiveOptions，其中滚动项目和每页项目是用断点定义的。
- Header and Foote。我们可以使用页眉和页脚模板与旋转木马来显示额外的细节。
- Orientation。旋转木马的方向可以通过设置方向属性改变为垂直或水平。默认值是水平的。
- Properties。Angular PrimeNG Carousel提供了各种属性，可以利用这些属性来制作具有更好用户体验的增强和有吸引力的内容库。
- Templates。它用于为旋转木马创建不同的模板/设计。它可以为旋转木马提供页眉、页脚、标题等。
- Styling：旋转木马组件允许我们使用几个预定义的类对其进行自定义样式设计。这些类可用于设置组件的标题、页脚、标题等。
- Events:旋转木马组件可以根据用户的一些动作触发一些事件，这样数据或设计就可以得到相应的修改并显示适当的结果。
语法：创建一个旋转木马，如下所示。
- 导入该模块。
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
项目结构：项目结构将如下所示。
Project Structure
例子1：在下面的例子中，我们有一个带有一些数据的简单旋转木马。
- app.component.html
<h1 style="color: green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Carousel Component</h3>
<p-carousel [value]="tutorials">
<ng-template let-item pTemplate="item">
<h4>Tutorial: {{ item.title }}</h4>
<p-image [src]="item.image"
alt="Image"
width="700px">
</p-image>
</ng-template>
</p-carousel>
- app.component.ts
import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
tutorials: Tutorial[];
constructor(private primengConfig: PrimeNGConfig) { }
ngOnInit() {
this.tutorials = [
{
title: 'Web MH ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155051/WebMH.png',
},
{
title: 'Interview Experience ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420112859/IntExp.png',
},
{
title: 'GeeksforGeeks Logo ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png',
},
{
title: 'GeeksforGeeks Carnival ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210418122505/132_00_00_Mailheader-min.png',
},
{
title: 'Python Course ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20211028203138/GeeksforGeeks-Python-Foundation-Course-Learn-Python-from-Scratch-in-Hindi.png',
},
];
}
}
export interface Tutorial {
title?: String;
image?: String;
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { CarouselModule } from 'primeng/carousel';
import { ButtonModule } from 'primeng/button';
import { ImageModule } from 'primeng/image';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CarouselModule,
ButtonModule,
FormsModule,
ImageModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2 。在下面的例子中，我们启用了自动播放和循环播放。
- app.component.html
<h1 style="color: green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Carousel Component</h3>
<p-carousel [value]="tutorials"
[autoplayInterval]="1000"
[circular]="true">
<ng-template let-item pTemplate="item">
<h4>Tutorial: {{ item.title }}</h4>
<p-image [src]="item.image"
alt="Image"
width="700px">
</p-image>
</ng-template>
</p-carousel>
- app.component.ts
import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
tutorials: Tutorial[];
constructor(private primengConfig: PrimeNGConfig) { }
ngOnInit() {
this.tutorials = [
{
title: 'Web MH ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155051/WebMH.png',
},
{
title: 'Interview Experience ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420112859/IntExp.png',
},
{
title: 'GeeksforGeeks Logo ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png',
},
{
title: 'GeeksforGeeks Carnival ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210418122505/132_00_00_Mailheader-min.png',
},
{
title: 'Python Course ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20211028203138/GeeksforGeeks-Python-Foundation-Course-Learn-Python-from-Scratch-in-Hindi.png',
},
];
}
}
export interface Tutorial {
title?: String;
image?: String;
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { CarouselModule } from 'primeng/carousel';
import { ButtonModule } from 'primeng/button';
import { ImageModule } from 'primeng/image';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CarouselModule,
ButtonModule,
FormsModule,
ImageModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
