Advanced

<p-galleria
#galleria
[(value)]="images"
[(activeIndex)]="activeIndex"
[numVisible]="5"
[containerStyle]="{ 'max-width': '640px' }"
[containerClass]="galleriaClass()"
[showThumbnails]="showThumbnails"
[showItemNavigators]="true"
[showItemNavigatorsOnHover]="true"
[circular]="true"
[autoPlay]="true"
[transitionInterval]="3000"
>
<ng-template pTemplate="item" let-item>
  <img [src]="item.previewImageSrc" [ngStyle]="{ width: !fullscreen ? '100%' : '', display: !fullscreen ? 'block' : '' }" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
  <div class="p-grid p-nogutter p-justify-center">
    <img [src]="item.thumbnailImageSrc" />
  </div>
</ng-template>
<ng-template pTemplate="footer" let-item>
  <div class="custom-galleria-footer">
    <button type="button" pButton icon="pi pi-list" (click)="onThumbnailButtonClick()"></button>
    <span *ngIf="images" class="title-container">
      <span>{ { activeIndex + 1 } }/{ { images.length } }</span>
      <span class="title">{ { images[activeIndex].title } }</span>
      <span>{ { images[activeIndex].alt } }</span>
    </span>
    <button type="button" pButton [icon]="fullScreenIcon()" (click)="toggleFullScreen()" class="fullscreen-button"></button>
  </div>
</ng-template>
</p-galleria>