Angular PrimeNG Carousel AutoPlay и Circular

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

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

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

Angular PrimeNG Carousel Autoplay и Circular: для автоматической прокрутки карусели мы можем определить время в свойстве autoplayInterval. Время в миллисекундах. Кроме того, для бесконечной прокрутки необходимо включить циклическое свойство. Обратите внимание, что в режиме автовоспроизведения цикл включен по умолчанию.

Синтаксис:

<p-carousel [value]="..." 
    [autoplayInterval]="3000" 
    [circular]="true">
    <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: В этом примере мы узнаем о свойстве autoplayInterval.

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Carousel Autoplay </h2>
    <div style="width:80%;">
        <p-carousel [value]="images" 
            [autoplayInterval]="1000">
            <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: В этом примере мы узнаем о циклическом свойстве.

app.component.html

HTML

<div id="GFG" style="50%">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Carousel Circular</h2>
    <div style="width:50%;">
        <p-carousel [value]="images" [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

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 Carousel AutoPlay и Circular

HTML

CSS

Javascript

Javascript

HTML

CSS

Javascript

Javascript

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