Indicator

Индикаторы позволяют быстро перемещаться между элементами.

Indicators with Click Event

<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[showThumbnails]="false"
[showIndicators]="true"
>
<ng-template pTemplate="item" let-item>
  <img [src]="item.previewImageSrc" style="width: 100%; display: block" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
  <div class="p-grid p-nogutter p-justify-center">
    <img [src]="item.thumbnailImageSrc" style="display: block" />
  </div>
</ng-template>
</p-galleria>

Indicators with Hover Event

<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[showThumbnails]="false"
[showIndicators]="true"
[changeItemOnIndicatorHover]="true"
>
<ng-template pTemplate="item" let-item>
  <img [src]="item.previewImageSrc" style="width: 100%; display: block" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
  <div class="p-grid p-nogutter p-justify-center">
    <img [src]="item.thumbnailImageSrc" style="display: block" />
  </div>
</ng-template>
</p-galleria>

Inside Content

<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[showThumbnails]="false"
[showIndicators]="true"
[changeItemOnIndicatorHover]="true"
[showIndicatorsOnItem]="true"
>
<ng-template pTemplate="item" let-item>
  <img [src]="item.previewImageSrc" style="width: 100%; display: block" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
  <div class="p-grid p-nogutter p-justify-center">
    <img [src]="item.thumbnailImageSrc" style="display: block" />
  </div>
</ng-template>
</p-galleria>

Positioned at Top

<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[showThumbnails]="false"
[showIndicators]="true"
[changeItemOnIndicatorHover]="true"
[showIndicatorsOnItem]="true"
indicatorsPosition="top"
>
<ng-template pTemplate="item" let-item>
  <img [src]="item.previewImageSrc" style="width: 100%; display: block" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
  <div class="p-grid p-nogutter p-justify-center">
    <img [src]="item.thumbnailImageSrc" style="display: block" />
  </div>
</ng-template>
</p-galleria>

Positioned at Left

<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[showThumbnails]="false"
[showIndicators]="true"
[changeItemOnIndicatorHover]="true"
[showIndicatorsOnItem]="true"
indicatorsPosition="left"
>
<ng-template pTemplate="item" let-item>
  <img [src]="item.previewImageSrc" style="width: 100%; display: block" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
  <div class="p-grid p-nogutter p-justify-center">
    <img [src]="item.thumbnailImageSrc" style="display: block" />
  </div>
</ng-template>
</p-galleria>

Positioned at Right

<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[showThumbnails]="false"
[showIndicators]="true"
[changeItemOnIndicatorHover]="true"
[showIndicatorsOnItem]="true"
indicatorsPosition="right"
>
<ng-template pTemplate="item" let-item>
  <img [src]="item.previewImageSrc" style="width: 100%; display: block" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
  <div class="p-grid p-nogutter p-justify-center">
    <img [src]="item.thumbnailImageSrc" style="display: block" />
  </div>
</ng-template>
</p-galleria>

Template

index + 1

<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[showThumbnails]="false"
[showIndicators]="true"
[changeItemOnIndicatorHover]="true"
[showIndicatorsOnItem]="true"
indicatorsPosition="left"
>
<ng-template pTemplate="item" let-item>
  <img [src]="item.previewImageSrc" style="width: 100%; display: block" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
  <div class="p-grid p-nogutter p-justify-center">
    <img [src]="item.thumbnailImageSrc" style="display: block" />
  </div>
</ng-template>
<ng-template pTemplate="indicator" let-index>
  <span style="color: #e9ecef; cursor: pointer">
    { { index + 1 } }
  </span>
</ng-template>
</p-galleria>

Programmatic Navigator