Angular PrimeNG Galleria自动播放

Angular PrimeNG是一个开源的Angular应用程序的UI组件库。使用Angular PrimeNG提供的组件，人们可以创建令人惊叹和响应的angular应用程序。在这篇文章中，我们将看到Angular PrimeNG Galleria AutoPlay.

Galleria是一个先进的组件，以吸引人的方式显示图片。它需要一个名为 item 的模板和一个对象数组作为值。在**自动播放模式下，galleria组件的活动项目在定义的时间后自动改变。这个时间可以用transitionInterval属性来定义。

Angular PrimeNG Galleria自动播放属性：

value。它接受一个对象的数组，作为画廊项目显示。
circular。这是一个布尔属性，当设置为 “真 “时，画廊项目可以无限滚动。
autoPlay：这个布尔属性用于通过设置为真/假来启用/禁用画廊项目的幻灯片。
transitionInterval。这个属性是用来设置一个项目应该显示的时间。默认值是4000ms。

语法:

<p-galleria 
    [value]="img" 
    [containerStyle]="{'max-width': '500px'}" 
    [autoPlay]="true">
    <ng-template pTemplate="item" let-img>
        ...
    </ng-template>
    <ng-template pTemplate="thumbnail" let-img>
        ...
    </ng-template>
</p-galleria>

创建Angular应用程序并安装模块：

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

ng new myapp

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

cd myapp

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

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

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG Galleria自动播放

例子1：这是一个基本的例子，说明如何在galleria组件中启用自动播放。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria AutoPlay</h3>
  
<p-galleria [value]="img" 
            [containerStyle]="{'max-width': '500px'}" 
            [autoPlay]="true">
  
    <ng-template pTemplate="item" let-img>
        <img [src]="img.URL" 
             style="width: 100%; display: block;" />
    </ng-template>
  
    <ng-template pTemplate="thumbnail" let-img>
        <img [src]="img.URL" 
             style="width: 100px; display: block;" />
    </ng-template>
</p-galleria>

app.component.ts

import { Component } from '@angular/core';
  
interface GalleriaImage {
    URL: String;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    img: GalleriaImage[] = [];
  
    ngOnInit() {
        this.img = [
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235505/eximg1.gif',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png',
            },
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { GalleriaModule } from 'primeng/galleria';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        GalleriaModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Galleria自动播放

例子2：在这个例子中，我们将transitionInterval属性设置为1000，将过渡延迟设置为1秒。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria AutoPlay</h3>
  
<p-galleria [value]="img" 
            [containerStyle]="{'max-width': '500px'}" 
            [autoPlay]="true" 
            [transitionInterval]="1000">
  
    <ng-template pTemplate="item" let-img>
        <img [src]="img.URL" 
             style="width: 100%; display: block;" />
    </ng-template>
  
    <ng-template pTemplate="thumbnail" let-img>
        <img [src]="img.URL"
             style="width: 100px; display: block;" />
    </ng-template>
</p-galleria>

app.component.ts

import { Component } from '@angular/core';
  
interface GalleriaImage {
    URL: String;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent {
    img: GalleriaImage[] = [];
  
    ngOnInit() {
        this.img = [
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235505/eximg1.gif"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png"
            }
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { GalleriaModule } from 'primeng/galleria';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        GalleriaModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Galleria自动播放