Карусельный стиль Angular PrimeNG

Опубликовано: 20 Февраля, 2023

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы увидим Angular PrimeNG Carousel Styling.

Карусель — это компонент слайдера контента, в котором массив данных отображается последовательно либо вручную, либо автоматически. Карусель в Angular PrimeNG обеспечивает отличную настройку с различными параметрами стиля, которые можно использовать для создания динамических каруселей, а также для улучшения общего пользовательского опыта.

Карусельный стиль

p-carousel: действует как элемент-контейнер для карусели.
p-carousel-header: это раздел заголовка карусели.
p-carousel-footer: это нижний колонтитул карусели.
p-carousel-content: это основной контент, который содержит контейнер области просмотра.
p-carousel-container: действует как контейнер области просмотра, содержащий кнопки навигации и область просмотра.
p-carousel-items-content: визуализирует область просмотра.
p-carousel-dots-container : действует как контейнер пагинатора.
p-carousel-dot-item: это элемент пагинатора.
p-carousel-dot-icon: значок элемента пагинатора.

Синтаксис:

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

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

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

Структура проекта: Это будет выглядеть следующим образом:

Пример 1: В этом примере описывается базовое использование стилей карусели с помощью p-carousel в Angular PrimeNG.

app.component.ts

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
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: "Description for Image 1",
            title: "Title 1"
        },
        {
            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: "Description for Image 2",
            title: "Title 2"
        },
        {
            previewImageSrc:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png",
            thumbnailImageSrc:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png",
            alt: "Description for Image 3",
            title: "Title 3"
        },
        {
            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: "Description for Image 4",
            title: "Title 4"
        },
  
    ];
}

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>Carousel Styling</h2>
  
    <div style="width:50%; ">
        <p-carousel [value]="images" 
                    [numVisible]="1" 
                    [numScroll]="1" 
                    [circular]="true">
            <ng-template let-item pTemplate="item">
                <img [src]="item.previewImageSrc" 
                     alt="item.alt"
                     width="500px">
            </ng-template>
        </p-carousel>
    </div>
</div>

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { CarouselModule } from "primeng/carousel";
import { AppComponent } from "./app.component";
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        CarouselModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Выход:

Пример 2. Это еще один пример, описывающий базовое использование стилей карусели с помощью p-carousel-header и p-carousel-footer в Angular PrimeNG.

app.component.ts

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
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: "Description for Image 1",
            title: "Title 1"
        },
        {
            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: "Description for Image 2",
            title: "Title 2"
        },
        {
            previewImageSrc:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png",
            thumbnailImageSrc:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png",
            alt: "Description for Image 3",
            title: "Title 3"
        },
        {
            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: "Description for Image 4",
            title: "Title 4"
        },
    ];
}

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>Carousel Styling</h2>
  
    <div style="width:50%; ">
        <p-carousel [value]="images" 
                    [numVisible]="1" 
                    [numScroll]="1" 
                    [circular]="true">
            <ng-template pTemplate="header">
                <h3 style="color:red">
                    I am a Header of Carousel
                </h3>
            </ng-template>
            <ng-template let-item pTemplate="item">
                <img [src]="item.previewImageSrc" 
                     alt="item.alt" 
                     width="500px">
            </ng-template>
            <ng-template pTemplate="footer">
                <h3 style="color:red">
                    I am a Footer of Carousel
                </h3>
            </ng-template>
        </p-carousel>
    </div>
</div>

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { CarouselModule } from "primeng/carousel";
import { AppComponent } from "./app.component";
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        CarouselModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Выход:

Ссылка: http://primefaces.org/primeng/carousel

Technical Scripter Picked AngularJS

Карусельный стиль Angular PrimeNG

Javascript

HTML

Javascript

Javascript

HTML

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ