Angular PrimeNG Carousel 基础

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的风格设计，该框架可用于制作响应式网站，非常方便。本文将告诉我们如何在Angular PrimeNG中使用**基本的旋转木马。

Angular PrimeNG Basic Carousel是用来渲染基本的旋转木马。旋转木马是一个滑块类型的组件，提供了高度的自定义功能。

语法:

<p-carousel [value]="..">
    ...
</p-carousel>

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：在你给定的目录中安装PrimeNG。

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

项目结构：它将看起来像如下。

Angular PrimeNG Carousel Basic

Project Structure

例子1：下面是一个简单的例子，演示Angular PrimeNG Basic carousel的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Carousel Basic</h4>
  
<p-carousel [value]="cars">
    <ng-template let-car pTemplate="item">
        <div class="product-item">
            <div class="product-item-content">
                <div class="p-mb-3"></div>
                <div>
                    <h4 
                        class="p-mb-1">
                        {{ car.id }}
                    </h4>
                    <h4 
                        class="p-mb-1">
                        {{ car.name }}
                    </h4>
                    <h4 
                        class="p-mb-1">
                        {{ car.description }}
                    </h4>
                    <h6 
                        class="p-mt-0 p-mb-3">
                        ${{ car.price }}
                    </h6>
                    <div class="car-buttons p-mt-3">
                        <p-button 
                            type="button" 
                            styleClass="p-button 
                                p-button-rounded p-mr-2" 
                            icon="pi pi-search">
                        </p-button>
                        <p-button 
                            type="button" 
                            styleClass="p-button-success 
                                p-button-rounded p-mr-2" 
                            icon="pi pi-star">
                        </p-button>
                        <p-button 
                            type="button" 
                            styleClass="p-button-help 
                                p-button-rounded" 
                            icon="pi pi-cog">
                        </p-button>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-carousel>

import { Component } from '@angular/core';
  
interface Car {
    id?: string;
    name?: string;
    description?: string;
    price?: number;
}
  
@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
})
export class AppComponent {
    cars: Car[] = [];
  
    constructor() { }
  
    ngOnInit() {
        this.cars = [
            {
                id: '1',
                name: 'Bugatti',
                description: 'Racing car',
                price: 800,
            },
            {
                id: '2',
                name: 'Ferrari',
                description: 'The Prancing Horse',
                price: 1500,
            },
            {
                id: '3',
                name: 'Porsche',
                description: 'Full spectrum',
                price: 10000,
            },
        ];
    }
}

.product-item-content {
    border: 1px solid var(--surface-d);
    border-radius: 3px;
    margin: 0.3rem;
    text-align: center;
    padding: 2rem 0;
}
  
.product-image {
    width: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 
        0 3px 6px rgba(0, 0, 0, 0.23);
}

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';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        CarouselModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG Carousel Basic

例子2：下面是另一个基本旋转木马的例子。在这个例子中，我们使用numvisible, numscroll, 和 circular 属性。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Carousel Basic</h4>
  
<p-carousel 
    [value]="cars" 
    [numVisible]="2" 
    [numScroll]="3" 
    [circular]="false">
    <ng-template let-car pTemplate="itaem">
        <div class="product-item">
            <div class="product-item-content">
                <div class="p-mb-3"></div>
                <div>
                    <h4 
                        class="p-mb-1">
                        {{ car.id }}
                    </h4>
                    <h4 
                        class="p-mb-1">
                        {{ car.name }}
                    </h4>
                    <h4 
                        class="p-mb-1">
                        {{ car.description }}
                    </h4>
                    <h6 
                        class="p-mt-0 p-mb-3">
                        ${{ car.price }}
                    </h6>
                    <div class="car-buttons p-mt-3">
                        <p-button 
                            type="button" 
                            styleClass="p-button 
                                p-button-rounded p-mr-2" 
                            icon="pi pi-search">
                        </p-button>
                        <p-button 
                            type="button" 
                            styleClass="p-button-success 
                                p-button-rounded p-mr-2" 
                            icon="pi pi-star">
                        </p-button>
                        <p-button 
                            type="button" 
                            styleClass="p-button-help 
                                p-button-rounded" 
                            icon="pi pi-cog">
                        </p-button>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</p-carousel>

import { Component } from '@angular/core';
  
interface Car {
    id?: string;
    name?: string;
    description?: string;
    price?: number;
}
  
@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
})
export class AppComponent {
    cars: Car[] = [];
  
    constructor() { }
  
    ngOnInit() {
        this.cars = [
            {
                id: '1',
                name: 'Bugatti',
                description: 'Racing car',
                price: 800,
            },
            {
                id: '2',
                name: 'Ferrari',
                description: 'The Prancing Horse',
                price: 1500,
            },
            {
                id: '3',
                name: 'Porsche',
                description: 'Full spectrum',
                price: 10000,
            },
        ];
    }
}

.product-item-content {
    border: 1px solid var(--surface-d);
    border-radius: 3px;
    margin: 0.3rem;
    text-align: center;
    padding: 2rem 0;
}
  
.product-image {
    width: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 
        0 3px 6px rgba(0, 0, 0, 0.23);
}

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';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        CarouselModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG Carousel Basic