From 0cfa9e9d0a1008cbd77e3b0fddb8ccfa95a2409e Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 6 Apr 2020 07:25:05 +0300
Subject: [PATCH] Refactor #212

---
 src/components/galleria/Galleria.d.ts         |  8 +-
 src/components/galleria/Galleria.vue          |  4 +-
 src/components/galleria/GalleriaContent.vue   |  4 +-
 src/components/galleria/GalleriaItemSlot.vue  |  4 +-
 src/components/galleria/GalleriaPreview.vue   |  2 +-
 .../galleria/GalleriaThumbnails.vue           |  2 +-
 src/views/galleria/GalleriaBasicDemo.vue      | 16 ++--
 src/views/galleria/GalleriaCaptionDemo.vue    |  8 +-
 src/views/galleria/GalleriaCircularDemo.vue   | 16 ++--
 src/views/galleria/GalleriaDemo.vue           |  4 +-
 src/views/galleria/GalleriaDoc.vue            | 22 ++---
 src/views/galleria/GalleriaFullScreenDemo.vue | 36 ++++-----
 src/views/galleria/GalleriaIndicatorDemo.vue  | 80 +++++++++----------
 src/views/galleria/GalleriaPreviewDemo.vue    | 48 +++++------
 src/views/galleria/GalleriaResponsiveDemo.vue |  8 +-
 src/views/galleria/GalleriaThumbnailDemo.vue  | 40 +++++-----
 16 files changed, 151 insertions(+), 151 deletions(-)

diff --git a/src/components/galleria/Galleria.d.ts b/src/components/galleria/Galleria.d.ts
index 97ce765af..59066d5e2 100644
--- a/src/components/galleria/Galleria.d.ts
+++ b/src/components/galleria/Galleria.d.ts
@@ -23,14 +23,14 @@ export declare class Galleria extends Vue {
     indicatorsPosition?: string;
     baseZIndex?: number;
     maskClass?: string;
-    galleriaStyle?: string;
-    galleriaClass?: string;
+    containerStyle?: string;
+    containerClass?: string;
 	$slots: {
 		header: VNode[];
         footer: VNode[];
-        previewItem: VNode[];
+        item: VNode[];
         previewCaption: VNode[];
         indicator: VNode[];
-        thumbnailItem: VNode[];
+        thumbnail: VNode[];
 	}
 }
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index 89e6b78fc..ef699a6f2 100644
--- a/src/components/galleria/Galleria.vue
+++ b/src/components/galleria/Galleria.vue
@@ -101,11 +101,11 @@ export default {
             type: String,
             default: null
         },
-        galleriaStyle: {
+        containerStyle: {
             type: String,
             default: null
         },
-        galleriaClass: {
+        containerClass: {
             type: String,
             default: null
         }
diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
index b9e008149..cdadde694 100644
--- a/src/components/galleria/GalleriaContent.vue
+++ b/src/components/galleria/GalleriaContent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.galleriaStyle">
+    <div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.containerStyle">
         <button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('maskHide')">
             <span class="p-galleria-close-icon pi pi-times"></span>
         </button>
@@ -90,7 +90,7 @@ export default {
                 'p-galleria-fullscreen': this.$attrs.fullScreen,
                 'p-galleria-indicator-onpreview': this.$attrs.showIndicatorsOnPreview,
                 'p-galleria-preview-nav-onhover': this.$attrs.showNavButtonsOnPreviewHover && !this.$attrs.fullScreen
-            }, thumbnailsPosClass, indicatorPosClass, this.$attrs.galleriaClass]
+            }, thumbnailsPosClass, indicatorPosClass, this.$attrs.containerClass]
         }
     },
     components: {
diff --git a/src/components/galleria/GalleriaItemSlot.vue b/src/components/galleria/GalleriaItemSlot.vue
index bef169623..0022fef9c 100644
--- a/src/components/galleria/GalleriaItemSlot.vue
+++ b/src/components/galleria/GalleriaItemSlot.vue
@@ -26,9 +26,9 @@ export default {
         if (template) {
             let content;
             switch(type) {
-                case 'previewItem':
+                case 'item':
                 case 'previewCaption':
-                case 'thumbnailItem':
+                case 'thumbnail':
                     content = template({
                         item
                     });
diff --git a/src/components/galleria/GalleriaPreview.vue b/src/components/galleria/GalleriaPreview.vue
index f39fcae11..57f6ba28b 100644
--- a/src/components/galleria/GalleriaPreview.vue
+++ b/src/components/galleria/GalleriaPreview.vue
@@ -5,7 +5,7 @@
             <span class="p-galleria-preview-prev-icon pi pi-chevron-left"></span>
         </button>
         <div class="p-galleria-preview-items-content">
-            <GalleriaItemSlot type="previewItem" :item="activeItem" :templates="templates" />
+            <GalleriaItemSlot type="item" :item="activeItem" :templates="templates" />
         </div>
         <button v-if="showPreviewNavButtons" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
             <span class="p-galleria-preview-next-icon pi pi-chevron-right"></span>
diff --git a/src/components/galleria/GalleriaThumbnails.vue b/src/components/galleria/GalleriaThumbnails.vue
index deca60ee7..adbdd707c 100644
--- a/src/components/galleria/GalleriaThumbnails.vue
+++ b/src/components/galleria/GalleriaThumbnails.vue
@@ -13,7 +13,7 @@
                         'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
                         'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
                         <div class="p-galleria-thumbnail-item-content" :tabindex="isItemActive(index) ? 0 : null" @click="onItemClick(index)" @keydown.enter="onItemClick(index)">
-                            <GalleriaItemSlot type="thumbnailItem" :item="item" :templates="templates" />
+                            <GalleriaItemSlot type="thumbnail" :item="item" :templates="templates" />
                         </div>
                     </div>
                 </div>
diff --git a/src/views/galleria/GalleriaBasicDemo.vue b/src/views/galleria/GalleriaBasicDemo.vue
index 0b34c4d39..41d8b88e7 100644
--- a/src/views/galleria/GalleriaBasicDemo.vue
+++ b/src/views/galleria/GalleriaBasicDemo.vue
@@ -12,10 +12,10 @@
         <div class="content-section implementation">
             <h3 class="first">Default</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
                     </div>
@@ -29,10 +29,10 @@
             </div>
 
             <Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
                     </div>
@@ -47,10 +47,10 @@
 <template v-pre>
 &lt;h3 class="first"&gt;Default&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
         &lt;/div&gt;
@@ -64,10 +64,10 @@
 &lt;/div&gt;
 
 &lt;Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
         &lt;/div&gt;
diff --git a/src/views/galleria/GalleriaCaptionDemo.vue b/src/views/galleria/GalleriaCaptionDemo.vue
index 523a91940..0c9478ce8 100644
--- a/src/views/galleria/GalleriaCaptionDemo.vue
+++ b/src/views/galleria/GalleriaCaptionDemo.vue
@@ -11,10 +11,10 @@
 
         <div class="content-section implementation">
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
-                <template #previewItem="{item}">
+                <template #item="{item}">
 					<img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="{item}">
+				<template #thumbnail="{item}">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
                     </div>
@@ -32,10 +32,10 @@
 <CodeHighlight>
 <template v-pre>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
-    &lt;template #previewItem="{item}"&gt;
+    &lt;template #item="{item}"&gt;
         &lt;img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="{item}"&gt;
+    &lt;template #thumbnail="{item}"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
diff --git a/src/views/galleria/GalleriaCircularDemo.vue b/src/views/galleria/GalleriaCircularDemo.vue
index 7f32b4699..e36d1aa1d 100644
--- a/src/views/galleria/GalleriaCircularDemo.vue
+++ b/src/views/galleria/GalleriaCircularDemo.vue
@@ -12,10 +12,10 @@
         <div class="content-section implementation">
             <h3 class="first">Basic</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -25,10 +25,10 @@
             <h3>AutoPlay</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :circular="true" :autoPlay="true" :transitionInterval="2000">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -43,10 +43,10 @@
 <template v-pre>
 &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -56,10 +56,10 @@
 &lt;h3&gt;AutoPlay&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
     :circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
diff --git a/src/views/galleria/GalleriaDemo.vue b/src/views/galleria/GalleriaDemo.vue
index a12cd6275..15778fcfe 100644
--- a/src/views/galleria/GalleriaDemo.vue
+++ b/src/views/galleria/GalleriaDemo.vue
@@ -13,10 +13,10 @@
             <Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
                 :showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"
                 :circular="true" :autoPlay="true" :transitionInterval="3000">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
diff --git a/src/views/galleria/GalleriaDoc.vue b/src/views/galleria/GalleriaDoc.vue
index 14ced1aee..571a5ed3e 100644
--- a/src/views/galleria/GalleriaDoc.vue
+++ b/src/views/galleria/GalleriaDoc.vue
@@ -8,10 +8,10 @@ import Galleria from 'primevue/galleria';
 </CodeHighlight>
 
 				<h3>Getting Started</h3>
-				<p>Galleria requires previewItem template and a value as an array of objects.</p>
+				<p>Galleria requires item template and a value as an array of objects.</p>
 <CodeHighlight>
 &lt;Galleria :value="images"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /&gt;
     &lt;/template&gt;
 &lt;/Galleria&gt;
@@ -39,10 +39,10 @@ export default {
 
 <CodeHighlight>
 &lt;Galleria :value="images" :numVisible="5"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
         &lt;/div&gt;
@@ -56,10 +56,10 @@ export default {
 
 <CodeHighlight>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
         &lt;/div&gt;
@@ -92,10 +92,10 @@ responsiveOptions: [
     &lt;template #header&gt;
         &lt;h1&gt;Header&lt;/h1&gt;
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
         &lt;/div&gt;
@@ -252,7 +252,7 @@ responsiveOptions: [
                                 <td>Style class of the mask on fullscreen mode.</td>
                             </tr>
                             <tr>
-                                <td>galleriaStyle</td>
+                                <td>containerStyle</td>
                                 <td>string</td>
                                 <td>null</td>
                                 <td>Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.</td>
@@ -331,10 +331,10 @@ responsiveOptions: [
 &lt;Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
     :showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"
     :circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
diff --git a/src/views/galleria/GalleriaFullScreenDemo.vue b/src/views/galleria/GalleriaFullScreenDemo.vue
index c261997ac..5fabc17a3 100644
--- a/src/views/galleria/GalleriaFullScreenDemo.vue
+++ b/src/views/galleria/GalleriaFullScreenDemo.vue
@@ -11,12 +11,12 @@
 
         <div class="content-section implementation">
             <h3 class="first">Basic</h3>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" galleriaStyle="max-width: 50%"
+            <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
                 :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -26,12 +26,12 @@
             <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
 
             <h3>Without Thumbnails</h3>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
+            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
                 :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -41,12 +41,12 @@
             <Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
 
             <h3>Custom Contents</h3>
-            <Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
+            <Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
                 :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -66,12 +66,12 @@
 <CodeHighlight>
 <template v-pre>
 &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" galleriaStyle="max-width: 50%"
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
     :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -81,12 +81,12 @@
 &lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" /&gt;
 
 &lt;h3&gt;Without Thumbnails&lt;/h3&gt;
-&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
+&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
     :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -96,12 +96,12 @@
 &lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /&gt;
 
 &lt;h3&gt;Custom Contents&lt;/h3&gt;
-&lt;Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
+&lt;Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
     :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
diff --git a/src/views/galleria/GalleriaIndicatorDemo.vue b/src/views/galleria/GalleriaIndicatorDemo.vue
index 16602e3e2..dba4199ea 100644
--- a/src/views/galleria/GalleriaIndicatorDemo.vue
+++ b/src/views/galleria/GalleriaIndicatorDemo.vue
@@ -13,10 +13,10 @@
             <h3 class="first">Basic</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -28,10 +28,10 @@
             <h3>Change Preview On Indicator Hover</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -43,10 +43,10 @@
             <h3>Show Indicator On Preview</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -61,10 +61,10 @@
                 <template #header>
                     Bottom
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -76,10 +76,10 @@
                 <template #header>
                     Top
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -91,10 +91,10 @@
                 <template #header>
                     Left
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -106,10 +106,10 @@
                 <template #header>
                     Right
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -121,10 +121,10 @@
             <h3>Template</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria"
                 :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -138,10 +138,10 @@
 
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria"
                 :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -155,10 +155,10 @@
 
             <Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria2"
                 :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -179,10 +179,10 @@
 &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
     :showThumbnails="false" :showIndicators="true"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -194,10 +194,10 @@
 &lt;h3&gt;Change Preview On Indicator Hover&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
     :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -209,10 +209,10 @@
 &lt;h3&gt;Show Indicator On Preview&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
     :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -227,10 +227,10 @@
     &lt;template #header&gt;
         Bottom
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -242,10 +242,10 @@
     &lt;template #header&gt;
         Top
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -257,10 +257,10 @@
     &lt;template #header&gt;
         Left
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -272,10 +272,10 @@
     &lt;template #header&gt;
         Right
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -287,10 +287,10 @@
 &lt;h3&gt;Template&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria"
     :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -304,10 +304,10 @@
 
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria"
     :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -321,10 +321,10 @@
 
 &lt;Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria2"
     :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
diff --git a/src/views/galleria/GalleriaPreviewDemo.vue b/src/views/galleria/GalleriaPreviewDemo.vue
index ba779e3c1..80e2c72a8 100644
--- a/src/views/galleria/GalleriaPreviewDemo.vue
+++ b/src/views/galleria/GalleriaPreviewDemo.vue
@@ -12,10 +12,10 @@
         <div class="content-section implementation">
             <h3 class="first">Basic</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -28,10 +28,10 @@
                 <template #header>
                     With Thumbnails
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -43,10 +43,10 @@
                 <template #header>
                     Without Thumbnails
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -59,10 +59,10 @@
                 <template #header>
                     With Thumbnails
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -74,10 +74,10 @@
                 <template #header>
                     Without Thumbnails
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -88,10 +88,10 @@
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
                 :showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"
                 :showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -106,10 +106,10 @@
 <template v-pre>
 &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -122,10 +122,10 @@
     &lt;template #header&gt;
         With Thumbnails
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -137,10 +137,10 @@
     &lt;template #header&gt;
         Without Thumbnails
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -153,10 +153,10 @@
     &lt;template #header&gt;
         With Thumbnails
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -168,10 +168,10 @@
     &lt;template #header&gt;
         Without Thumbnails
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
@@ -182,10 +182,10 @@
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
     :showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"
     :showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
diff --git a/src/views/galleria/GalleriaResponsiveDemo.vue b/src/views/galleria/GalleriaResponsiveDemo.vue
index d841aa13b..e4163efa5 100644
--- a/src/views/galleria/GalleriaResponsiveDemo.vue
+++ b/src/views/galleria/GalleriaResponsiveDemo.vue
@@ -11,10 +11,10 @@
 
         <div class="content-section implementation">
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </div>
@@ -28,10 +28,10 @@
 <CodeHighlight>
 <template v-pre>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
diff --git a/src/views/galleria/GalleriaThumbnailDemo.vue b/src/views/galleria/GalleriaThumbnailDemo.vue
index aa10139ed..6c31b70ee 100644
--- a/src/views/galleria/GalleriaThumbnailDemo.vue
+++ b/src/views/galleria/GalleriaThumbnailDemo.vue
@@ -12,10 +12,10 @@
         <div class="content-section implementation">
             <h3 class="first">Basic</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </div>
@@ -27,10 +27,10 @@
                 <template #header>
                     Left
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </div>
@@ -41,10 +41,10 @@
                 <template #header>
                     Right
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </div>
@@ -55,10 +55,10 @@
                 <template #header>
                     Top
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </div>
@@ -69,10 +69,10 @@
                 <template #header>
                     Bottom
                 </template>
-                <template #previewItem="slotProps">
+                <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
 				</template>
-				<template #thumbnailItem="slotProps">
+				<template #thumbnail="slotProps">
                     <div class="p-grid p-nogutter p-justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </div>
@@ -87,10 +87,10 @@
 <template v-pre>
 &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
         &lt;/div&gt;
@@ -102,10 +102,10 @@
     &lt;template #header&gt;
         Left
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
         &lt;/div&gt;
@@ -116,10 +116,10 @@
     &lt;template #header&gt;
         Right
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
         &lt;/div&gt;
@@ -130,10 +130,10 @@
     &lt;template #header&gt;
         Top
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
         &lt;/div&gt;
@@ -144,10 +144,10 @@
     &lt;template #header&gt;
         Bottom
     &lt;/template&gt;
-    &lt;template #previewItem="slotProps"&gt;
+    &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
-    &lt;template #thumbnailItem="slotProps"&gt;
+    &lt;template #thumbnail="slotProps"&gt;
         &lt;div class="p-grid p-nogutter p-justify-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
         &lt;/div&gt;