Source: https://primeng.org/galleria

PassThrough Attributes just landed ✅Learn More

• SearchK

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• PASSTHROUGH

Galleria

Galleria is an advanced content gallery component.

Import #

import { GalleriaModule } from 'primeng/galleria';

Basic #

Galleria requires a value as a collection of images, item template for the higher resolution image and thumbnail template to display as a thumbnail.

<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width:100%" /> </ng-template> <ng-template #thumbnail let-item> <img [src]="item.thumbnailImageSrc" /> </ng-template> </p-galleria>

Controlled #

Galleria can be controlled programmatically using the activeIndex property.

<div class="mb-4"> <p-button type="button" icon="pi pi-minus" (click)="prev()" /> <p-button type="button" icon="pi pi-plus" (click)="next()" severity="secondary" styleClass="ml-2" /> </div> <p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5" [(activeIndex)]="activeIndex"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%;" /> </ng-template> <ng-template #thumbnail let-item> <img [src]="item.thumbnailImageSrc" /> </ng-template> </p-galleria>

Indicator #

Click Event

Indicators are displayed at the bottom by enabling showIndicators property and interacted with the click event by default.

<p-galleria [(value)]="images" [showIndicators]="true" [showThumbnails]="false" [containerStyle]="{ 'max-width': '640px' }"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> </p-galleria>

Hover Event

Indicators can be activated on hover instead of click if changeItemOnIndicatorHover is added.

<p-galleria [(value)]="images" [showIndicators]="true" [showThumbnails]="false" [changeItemOnIndicatorHover]="true" [containerStyle]="{ 'max-width': '640px' }"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> </p-galleria>

Position

Indicators can be placed at four different sides using the indicatorsPosition property. In addition, enabling showIndicatorsOnItem moves the indicators inside the image section. indicatorsPosition set to bottom by default, accepted values are top, left, right, and bottom.

Bottom

Top

Left

Right

Inside

<p-galleria [(value)]="images" [indicatorsPosition]="position" [showIndicators]="true" [showThumbnails]="false" [showIndicatorsOnItem]="showIndicatorsOnItem" [containerStyle]="{ 'max-width': '640px', 'margin-top': '2em' }" > <ng-template pTemplate="item" let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> </p-galleria>

Template

Indicator content can be customized with the indicator template.

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

<p-galleria [(value)]="images" [showIndicators]="true" [showThumbnails]="false" [showIndicatorsOnItem]="true" indicatorsPosition="left" [containerStyle]="{ 'max-width': '100%', 'margin-top': '2em' }"> <ng-template pTemplate="item" let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> <ng-template pTemplate="indicator" let-index> <span style="color: #ffffff; cursor: pointer"> {{ index + 1 }} </span> </ng-template> </p-galleria>

Thumbnail #

Galleria can be controlled programmatically using the activeIndex property.

Bottom

Top

Left

Right

<div class="flex flex-wrap gap-4 mb-8"> <div *ngFor="let option of positionOptions" class="flex items-center"> <p-radiobutton [name]="option.label" [value]="option.value" [label]="option.label" [(ngModel)]="position" [inputId]="label" /> <label [for]="option.label" class="ml-2"> {{ option.label }} </label> </div> </div> <p-galleria [(value)]="images" [thumbnailsPosition]="position" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5" > <ng-template pTemplate="item" let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block" /> </ng-template> <ng-template pTemplate="thumbnail" let-item> <div class="grid gap-4 justify-center"> <img [src]="item.thumbnailImageSrc" style="width: 100%; display: block" /> </div> </ng-template> </p-galleria>

Responsive #

Galleria responsiveness is defined with the responsiveOptions property.

<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="7" [circular]="true"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> <ng-template #thumbnail let-item> <img [src]="item.thumbnailImageSrc" style="width: 100%; display: block;" /> </ng-template> </p-galleria>

Full Screen #

With Thumbnails

Full screen mode is enabled by adding fullScreen property.

Show

<p-galleria [(value)]="images" [(visible)]="displayBasic"[responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '50%' }" [numVisible]="9" [circular]="true" [fullScreen]="true" [showItemNavigators]="true"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> <ng-template #thumbnail let-item> <img [src]="item.thumbnailImageSrc" style="display: block;" /> </ng-template> </p-galleria>

Without Thumbnails

Thumbnails can also be hidden in full screen mode.

Show

<p-galleria [(value)]="images" [(visible)]="displayBasic" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '850px' }" [numVisible]="7" [circular]="true" [fullScreen]="true" [showItemNavigators]="true" [showThumbnails]="false"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> </p-galleria>

Custom Content

Using activeIndex, Galleria is displayed with a specific initial image.

<p-galleria [(value)]="images" [(visible)]="displayCustom" [(activeIndex)]="activeIndex" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '850px' }" [numVisible]="7" [circular]="true" [fullScreen]="true" [showItemNavigators]="true" [showThumbnails]="false"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> </p-galleria>

Navigator #

With Thumbnails

Add showItemNavigators to display navigator elements and the left and right side.

<p-galleria [(value)]="images" [showItemNavigators]="true" [responsiveOptions]="responsiveOptions" [circular]="true" [numVisible]="5" [containerStyle]="{ 'max-width': '640px' }"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> <ng-template #thumbnail let-item> <img [src]="item.thumbnailImageSrc" style="display: block;" /> </ng-template> </p-galleria>

Without Thumbnails

Simple example with indicators only.

<p-galleria [(value)]="images" [numVisible]="5" [circular]="true" [showItemNavigators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> </p-galleria>

Display on Hover

Navigators are displayed on hover only if showItemNavigatorsOnHover is enabled.

<p-galleria [(value)]="images" [showIndicators]="false" [showItemNavigatorsOnHover]="true" [showItemNavigators]="true" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> <ng-template #thumbnail let-item> <img [src]="item.thumbnailImageSrc" style="display: block;" /> </ng-template> </p-galleria>

With Indicators

Navigators and Indicators can be combined as well.

<p-galleria [(value)]="images" [showItemNavigators]="true" [showThumbnails]="false" [showIndicators]="true" [showItemNavigatorsOnHover]="true" [circular]="true"[responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> <ng-template #thumbnail let-item> <img [src]="item.thumbnailImageSrc" style="display: block;" /> </ng-template> </p-galleria>

AutoPlay #

A slideshow implementation is defined by adding circular and autoPlay properties.

<p-galleria [(value)]="images" [autoPlay]="true" [circular]="true" [responsiveOptions]="responsiveOptions" [numVisible]="5" [containerStyle]="{ 'max-width': '640px' }"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block" /> </ng-template> <ng-template #thumbnail let-item> <img [src]="item.thumbnailImageSrc" style="display: block" /> </ng-template> </p-galleria>

Caption #

Description of an image is specified with the caption template.

Title 1

Description for Image 1

<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5"> <ng-template #item let-item> <img [src]="item.itemImageSrc" style="width: 100%; display: block;" /> </ng-template> <ng-template #thumbnail let-item> <img [src]="item.thumbnailImageSrc" style="display: block;" /> </ng-template> <ng-template #caption let-item> <div class="text-xl mb-2 font-bold">{{ item.title }}</div> <p class="text-white">{{ item.alt }}</p> </ng-template> </p-galleria>

Advanced #

Galleria can be extended further to implement complex requirements.

1/15Title 1Description for Image 1

<p-galleria #galleria [(value)]="images" [(activeIndex)]="activeIndex" [numVisible]="5" [showThumbnails]="showThumbnails" [showItemNavigators]="true" [showItemNavigatorsOnHover]="true" [circular]="true" [autoPlay]="isAutoPlay" [transitionInterval]="3000" [containerStyle]="{ 'max-width': '640px' }" [containerClass]="galleriaClass()" > <ng-template #item let-item> <img [src]="item.itemImageSrc" [ngStyle]="{ width: !fullscreen ? '100%' : '', display: !fullscreen ? 'block' : '' }" /> </ng-template> <ng-template #thumbnail let-item> <div class="grid gap-4 justify-center"> <img [src]="item.thumbnailImageSrc" style="display: block" /> </div> </ng-template> <ng-template #footer let-item> <div class="flex items-stretch gap-2 bg-surface-950 text-white h-10"> <button type="button" pButton icon="pi pi-th-large" (click)="onThumbnailButtonClick()" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3" ></button> <button type="button" pButton [icon]="slideButtonIcon()" (click)="toggleAutoSlide()" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3" ></button> <span *ngIf="images" class="flex items-center gap-4 ml-3"> <span class="text-sm">{{ activeIndex + 1 }}/{{ images.length }}</span> <span class="font-bold text-sm">{{ images[activeIndex].title }}</span> <span class="text-sm">{{ images[activeIndex].alt }}</span> </span> <button type="button" pButton [icon]="fullScreenIcon()" (click)="toggleFullScreen()" class="bg-transparent border-none rounded-none hover:bg-white/10 text-white inline-flex justify-center items-center cursor-pointer px-3 ml-auto" ></button> </div> </ng-template> </p-galleria>

Accessibility #

Screen Reader

Galleria uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has aria-live attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay.

A slide has a group role with an aria-label that refers to the aria.slideNumber property of the locale API. Similarly aria.slide is used as the aria-roledescription of the item. Inactive slides are hidden from the readers with aria-hidden.

Next and Previous navigators are button elements with aria-label attributes referring to the aria.nextPageLabel and aria.firstPageLabel properties of the locale API by default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using nextButtonProps and prevButtonProps.

Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a tablist role whereas each item has a tab role with aria-selected and aria-controls attributes. The aria-label attribute of a quick navigation item refers to the aria.pageLabel of the locale API. Current page is marked with aria-current.

In full screen mode, modal element uses dialog role with aria-modal enabled. The close button retrieves aria-label from the aria.close property of the locale API.

Next/Prev Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus through interactive elements in the carousel. | | enter | Activates navigation. | | space | Activates navigation. |

Quick Navigation Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus through the active slide link. | | enter | Activates the focused slide link. | | space | Activates the focused slide link. | | right arrow | Moves focus to the next slide link. | | left arrow | Moves focus to the previous slide link. | | home | Moves focus to the first slide link. | | end | Moves focus to the last slide link. |

• Import

• Basic

• Controlled

• Indicator

  • Click Event

  • Hover Event

  • Position

  • Template

• Thumbnail

• Responsive

• Full Screen

  • With Thumbnails

  • Without Thumbnails

  • Custom Content

• Navigator

  • With Thumbnails

  • Without Thumbnails

  • Display on Hover

  • With Indicators

• AutoPlay

• Caption

• Advanced

• Accessibility

PrimeBlocks

490+ ready to use UI blocks crafted with PrimeNG and Tailwind CSS.

Learn More

PrimeNG 20.3.0 by PrimeTek