Элементы карусели Angular PrimeNG на страницу и элементы прокрутки

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

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

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

Элементов карусели Angular PrimeNG на странице и элементов прокрутки Количество элементов на странице определяется с помощью свойства numVisible, тогда как количество элементов для прокрутки определяется с помощью свойства numScroll.

Синтаксис :

<p-carousel [value]="..." [numVisible]="*" [numScroll]="*">
      <ng-template let-item pTemplate="item">
          Content to display
      </ng-template>
</p-carousel>

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

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

ng new appname

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

cd appname

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

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

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

Пример 1. В этом примере мы узнаем о свойстве numVisible .

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Carousel Items Per Page and Scroll Items</h2>
    <div style="width:100%;">
        <p-carousel [value]="images" [numVisible]="1" [circular]="true"
                    [numVisible]="2">
            <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

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

Javascript

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

Javascript

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: В этом примере мы узнаем о свойстве numScroll.

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Carousel Items Per Page and Scroll Items</h2>
    <div style="width:100%;">
        <p-carousel [value]="images" [numVisible]="1"
                    [circular]="true"
                    [numVisible]="2" [numScroll]="2">
            <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

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

Javascript

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

Javascript

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 { }

Выход:

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

Technical Scripter Picked AngularJS

Элементы карусели Angular PrimeNG на страницу и элементы прокрутки

HTML

CSS

Javascript

Javascript

HTML

CSS

Javascript

Javascript

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