极客教程Angular PrimeNG Carousel Vertical
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。这篇文章将向我们展示如何在Angular PrimeNG中使用基本旋转木马。
Angular PrimeNG Basic Carousel是用来渲染基本的旋转木马。该旋转木马是一个滑块类型的组件，提供了高度的自定义功能。
Angular PrimeNG Carousel Vertical:我们可以通过将方向设置为垂直来使Carousel垂直。旋转木马的默认布局是水平的。
语法:
<p-carousel [value]="..." orientation="vertical">
<ng-template let-car 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：在这个例子中，我们将学习垂直旋转木马。我们将在旋转木马中显示一些文本。
app.component.html
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Carousel Vertical</h2>
<div style="width:50%;">
<p-carousel [value]="dams" [numVisible]="1"
orientation="vertical" [circular]="true">
<ng-template let-dams pTemplate="item">
<div class="product-item">
<div class="product-item-content">
<div class="p-mb-3"></div>
<div>
<h4 style="color:green">
Dam Name: {{ dams.dam }}
</h4>
<h4 style="color:red">
State: {{ dams.state }}
</h4>
<h6 style="color:blueviolet">
River: {{ dams.river }}
</h6>
</div>
</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: oldlace;
}
.product-image {
width: 50%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
0 3px 6px rgba(0, 0, 0, 0.23);
}
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';
dams: any[] = [
{
"dam": "Bhavani Sagar dam",
"state": "Tamil Nadu",
"river": "Bhavani"
},
{
"dam": "Tungabhadra Dam",
"state": "Karnataka",
"river": "Tungabhadra"
},
{
"dam": "Rihand Dam",
"state": "Uttar Pradesh",
"river": "Rihand"
},
{
"dam": " Maithon Dam",
"state": "Jharkhand",
"river": "Barakar"
},
{
"dam": "Koyna Dam",
"state": "Maharashtra",
"river": "Koyna"
}
];
}
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">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Angular PrimeNG Carousel Vertical</h2>
<div style="width:50%;">
<p-carousel [value]="images" [numVisible]="1"
orientation="vertical" [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: oldlace;
}
.product-image {
width: 50%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
0 3px 6px rgba(0, 0, 0, 0.23);
}
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 { }
输出:
