Navigator
Item Navigators and Thumbnails
<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[circular]="true"
[showItemNavigators]="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>Item Navigators without Thumbnails
<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[circular]="true"
[showItemNavigators]="true"
[showThumbnails]="false"
>
<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>Item Navigators on Hover
<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[circular]="true"
[showItemNavigators]="true"
[showItemNavigatorsOnHover]="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>Item Navigators and Indicators
<p-galleria
[(value)]="images"
[responsiveOptions]="responsiveOptions"
[containerStyle]="{ 'max-width': '640px' }"
[numVisible]="5"
[circular]="true"
[showItemNavigators]="true"
[showThumbnails]="false"
[showIndicators]="true"
[showItemNavigatorsOnHover]="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>