diff --git a/src/components/galleria/Galleria.d.ts b/src/components/galleria/Galleria.d.ts
index 9c8ffe01a..1b0f04511 100755
--- a/src/components/galleria/Galleria.d.ts
+++ b/src/components/galleria/Galleria.d.ts
@@ -3,7 +3,7 @@ import Vue, {VNode} from 'vue';
 export declare class Galleria extends Vue {
     id?: string;
     value?: any;
-    activeItemIndex?: number;
+    activeIndex?: number;
     fullScreen?: boolean;
     visible?: boolean;
     numVisible?: number;
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index 5b10daca6..02696446f 100755
--- a/src/components/galleria/Galleria.vue
+++ b/src/components/galleria/Galleria.vue
@@ -21,7 +21,7 @@ export default {
             type: Array,
             default: null
         },
-        activeItemIndex: {
+        activeIndex: {
             type: Number,
             default: 0
         },
@@ -136,8 +136,8 @@ export default {
     },
     methods: {
         onActiveItemChange(index) {
-            if (this.activeItemIndex !== index) {
-                this.$emit('update:activeItemIndex', index);
+            if (this.activeIndex !== index) {
+                this.$emit('update:activeIndex', index);
             }
         },
         maskHide() {
diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
index 37da3addc..db08f01f8 100755
--- a/src/components/galleria/GalleriaContent.vue
+++ b/src/components/galleria/GalleriaContent.vue
@@ -7,12 +7,12 @@
             <GalleriaItemSlot type="header" :templates="$attrs.templates"/>
         </div>
         <div class="p-galleria-content">
-            <GalleriaItem :value="$attrs.value" :activeItemIndex.sync="activeItemIndex" :circular="$attrs.circular" :templates="$attrs.templates"
+            <GalleriaItem :value="$attrs.value" :activeIndex.sync="activeIndex" :circular="$attrs.circular" :templates="$attrs.templates"
                 :showIndicators="$attrs.showIndicators" :changeItemOnIndicatorHover="$attrs.changeItemOnIndicatorHover"
                 :showItemNavigators="$attrs.showItemNavigators" :autoPlay="$attrs.autoPlay" :slideShowActive.sync="slideShowActive"
                 @startSlideShow="startSlideShow" @stopSlideShow="stopSlideShow" />
 
-            <GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" :activeItemIndex.sync="activeItemIndex" :templates="$attrs.templates"
+            <GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" :activeIndex.sync="activeIndex" :templates="$attrs.templates"
                 :numVisible="$attrs.numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
                 :isVertical="isVertical()" :contentHeight="$attrs.verticalThumbnailViewPortHeight" :showThumbnailNavigators="$attrs.showThumbnailNavigators"
                 :slideShowActive.sync="slideShowActive" @stopSlideShow="stopSlideShow" />
@@ -35,17 +35,17 @@ export default {
     data() {
         return {
             id: this.$attrs.id || UniqueComponentId(),
-            activeItemIndex: this.$attrs.activeItemIndex,
+            activeIndex: this.$attrs.activeIndex,
             slideShowActive: false
         }
     },
     watch: {
-        '$attrs.activeItemIndex': function(newVal) {
-            this.activeItemIndex = newVal;
+        '$attrs.activeIndex': function(newVal) {
+            this.activeIndex = newVal;
         }
     },
     updated() {
-        this.$emit('activeItemChange', this.activeItemIndex);
+        this.$emit('activeItemChange', this.activeIndex);
     },
     beforeDestroy() {
 		if (this.slideShowActive) {
@@ -58,8 +58,8 @@ export default {
         },
         startSlideShow() {
             this.interval = setInterval(() => {
-                let activeIndex = (this.$attrs.circular && (this.$attrs.value.length - 1) === this.activeItemIndex) ? 0 : (this.activeItemIndex + 1);
-                this.activeItemIndex = activeIndex;
+                let activeIndex = (this.$attrs.circular && (this.$attrs.value.length - 1) === this.activeIndex) ? 0 : (this.activeIndex + 1);
+                this.activeIndex = activeIndex;
             }, this.$attrs.transitionInterval);
 
             this.slideShowActive = true;
diff --git a/src/components/galleria/GalleriaItem.vue b/src/components/galleria/GalleriaItem.vue
index 2613345b5..ad7ba6e9c 100755
--- a/src/components/galleria/GalleriaItem.vue
+++ b/src/components/galleria/GalleriaItem.vue
@@ -34,7 +34,7 @@ export default {
             type: Boolean,
             default: false
         },
-        activeItemIndex: {
+        activeIndex: {
             type: Number,
             default: 0
         },
@@ -74,20 +74,20 @@ export default {
     },
     methods: {
         next() {
-            let nextItemIndex = this.activeItemIndex + 1;
-            let activeIndex = this.circular && this.value.length - 1 === this.activeItemIndex
+            let nextItemIndex = this.activeIndex + 1;
+            let activeIndex = this.circular && this.value.length - 1 === this.activeIndex
                         ? 0
                         : nextItemIndex;
 
-            this.$emit('update:activeItemIndex', activeIndex);
+            this.$emit('update:activeIndex', activeIndex);
         },
         prev() {
-            let prevItemIndex = this.activeItemIndex !== 0 ? this.activeItemIndex - 1 : 0;
-            let activeIndex = this.circular && this.activeItemIndex === 0
+            let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
+            let activeIndex = this.circular && this.activeIndex === 0
                     ? this.value.length - 1
                     : prevItemIndex
 
-            this.$emit('update:activeItemIndex', activeIndex);
+            this.$emit('update:activeIndex', activeIndex);
         },
         stopSlideShow() {
             if (this.slideShowActive && this.stopSlideShow) {
@@ -112,33 +112,33 @@ export default {
         },
         onIndicatorClick(index) {
             this.stopSlideShow();
-            this.$emit('update:activeItemIndex', index);
+            this.$emit('update:activeIndex', index);
         },
         onIndicatorMouseEnter(index) {
             if (this.changeItemOnIndicatorHover) {
                 this.stopSlideShow();
 
-                this.$emit('update:activeItemIndex', index);
+                this.$emit('update:activeIndex', index);
             }
         },
         onIndicatorKeyDown(index) {
             this.stopSlideShow();
 
-            this.$emit('update:activeItemIndex', index);
+            this.$emit('update:activeIndex', index);
         },
         isIndicatorItemActive(index) {
-            return this.activeItemIndex === index;
+            return this.activeIndex === index;
         },
         isNavBackwardDisabled() {
-            return !this.circular && this.activeItemIndex === 0;
+            return !this.circular && this.activeIndex === 0;
         },
         isNavForwardDisabled() {
-            return !this.circular && this.activeItemIndex === (this.value.length - 1);
+            return !this.circular && this.activeIndex === (this.value.length - 1);
         }
     },
     computed: {
         activeItem() {
-            return this.value[this.activeItemIndex];
+            return this.value[this.activeIndex];
         },
         navBackwardClass() {
             return ['p-galleria-item-prev p-galleria-item-nav p-link', {
diff --git a/src/components/galleria/GalleriaThumbnails.vue b/src/components/galleria/GalleriaThumbnails.vue
index 065d73ba5..33b72e9a3 100755
--- a/src/components/galleria/GalleriaThumbnails.vue
+++ b/src/components/galleria/GalleriaThumbnails.vue
@@ -8,7 +8,7 @@
                 <div ref="itemsContainer" class="p-galleria-thumbnail-items" @transitionend="onTransitionEnd"
                     @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
                     <div v-for="(item, index) of value" :key="`p-galleria-thumbnail-item-${index}`" :class="['p-galleria-thumbnail-item', {
-                        'p-galleria-thumbnail-item-current': activeItemIndex === index,
+                        'p-galleria-thumbnail-item-current': activeIndex === index,
                         'p-galleria-thumbnail-item-active': isItemActive(index),
                         'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
                         'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
@@ -43,7 +43,7 @@ export default {
             type: Number,
             default: 3
         },
-        activeItemIndex: {
+        activeIndex: {
             type: Number,
             default: 0
         },
@@ -83,8 +83,8 @@ export default {
         return {
             d_numVisible: this.numVisible,
             d_oldNumVisible: this.numVisible,
-            d_activeItemIndex: this.activeItemIndex,
-            d_oldActiveItemIndex: this.activeItemIndex,
+            d_activeIndex: this.activeIndex,
+            d_oldActiveItemIndex: this.activeIndex,
             totalShiftedItems: 0,
             page: 0
         }
@@ -94,8 +94,8 @@ export default {
 			this.d_numVisible = newValue;
 			this.d_oldNumVisible = oldValue;
         },
-        activeItemIndex(newValue, oldValue) {
-			this.d_activeItemIndex = newValue;
+        activeIndex(newValue, oldValue) {
+			this.d_activeIndex = newValue;
 			this.d_oldActiveItemIndex = oldValue;
         }
     },
@@ -110,18 +110,18 @@ export default {
     updated() {
         let totalShiftedItems = this.totalShiftedItems;
 
-        if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeItemIndex) {
-            if (this.d_activeItemIndex <= this.getMedianItemIndex()) {
+        if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeIndex) {
+            if (this.d_activeIndex <= this.getMedianItemIndex()) {
                 totalShiftedItems = 0;
             }
-            else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeItemIndex) {
+            else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeIndex) {
                 totalShiftedItems = this.d_numVisible - this.value.length;
             }
-            else if (this.value.length - this.d_numVisible < this.d_activeItemIndex && this.d_numVisible % 2 === 0) {
-                totalShiftedItems = (this.d_activeItemIndex * -1) + this.getMedianItemIndex() + 1;
+            else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {
+                totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex() + 1;
             }
             else {
-                totalShiftedItems = (this.d_activeItemIndex * -1) + this.getMedianItemIndex();
+                totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex();
             }
 
             if (totalShiftedItems !== this.totalShiftedItems) {
@@ -130,12 +130,12 @@ export default {
 
             this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
 
-            if (this.d_oldActiveItemIndex !== this.d_activeItemIndex) {
+            if (this.d_oldActiveItemIndex !== this.d_activeIndex) {
                 DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
                 this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
             }
 
-            this.d_oldActiveItemIndex = this.d_activeItemIndex;
+            this.d_oldActiveItemIndex = this.d_activeIndex;
             this.d_oldNumVisible = this.d_numVisible;
         }
     },
@@ -160,10 +160,10 @@ export default {
             }
 
             if (this.circular) {
-                if (dir < 0 && this.value.length - 1 === this.d_activeItemIndex) {
+                if (dir < 0 && this.value.length - 1 === this.d_activeIndex) {
                     totalShiftedItems = 0;
                 }
-                else if (dir > 0 && this.d_activeItemIndex === 0) {
+                else if (dir > 0 && this.d_activeIndex === 0) {
                     totalShiftedItems = this.d_numVisible - this.value.length;
                 }
             }
@@ -189,14 +189,14 @@ export default {
         navBackward(e) {
             this.stopSlideShow();
 
-            let prevItemIndex = this.d_activeItemIndex !== 0 ? this.d_activeItemIndex - 1 : 0;
+            let prevItemIndex = this.d_activeIndex !== 0 ? this.d_activeIndex - 1 : 0;
             let diff = prevItemIndex + this.totalShiftedItems;
             if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
                 this.step(1);
             }
 
-            let activeIndex = this.circular && this.d_activeItemIndex === 0 ? this.value.length - 1 : prevItemIndex;
-            this.$emit('update:activeItemIndex', activeIndex);
+            let activeIndex = this.circular && this.d_activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
+            this.$emit('update:activeIndex', activeIndex);
 
             if (e.cancelable) {
                 e.preventDefault();
@@ -205,13 +205,13 @@ export default {
         navForward(e) {
             this.stopSlideShow();
 
-            let nextItemIndex = this.d_activeItemIndex + 1;
+            let nextItemIndex = this.d_activeIndex + 1;
             if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
                 this.step(-1);
             }
 
-            let activeIndex = this.circular && (this.value.length - 1) === this.d_activeItemIndex ? 0 : nextItemIndex;
-            this.$emit('update:activeItemIndex', activeIndex);
+            let activeIndex = this.circular && (this.value.length - 1) === this.d_activeIndex ? 0 : nextItemIndex;
+            this.$emit('update:activeIndex', activeIndex);
 
             if (e.cancelable) {
                 e.preventDefault();
@@ -221,10 +221,10 @@ export default {
             this.stopSlideShow();
 
             let selectedItemIndex = index;
-            if (selectedItemIndex !== this.d_activeItemIndex) {
+            if (selectedItemIndex !== this.d_activeIndex) {
                 const diff = selectedItemIndex + this.totalShiftedItems;
                 let dir = 0;
-                if (selectedItemIndex < this.d_activeItemIndex) {
+                if (selectedItemIndex < this.d_activeIndex) {
                     dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
                     if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
                         this.step(dir);
@@ -237,7 +237,7 @@ export default {
                     }
                 }
 
-                this.$emit('update:activeItemIndex', selectedItemIndex);
+                this.$emit('update:activeIndex', selectedItemIndex);
             }
         },
         onTransitionEnd() {
@@ -365,10 +365,10 @@ export default {
             }
         },
         isNavBackwardDisabled() {
-            return (!this.circular && this.d_activeItemIndex === 0) || (this.value.length <= this.d_numVisible);
+            return (!this.circular && this.d_activeIndex === 0) || (this.value.length <= this.d_numVisible);
         },
         isNavForwardDisabled() {
-            return (!this.circular && this.d_activeItemIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
+            return (!this.circular && this.d_activeIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
         },
         firstItemAciveIndex() {
             return this.totalShiftedItems * -1;
diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue
index 55324ae4a..807e33ea5 100644
--- a/src/views/galleria/GalleriaAdvancedDemo.vue
+++ b/src/views/galleria/GalleriaAdvancedDemo.vue
@@ -8,7 +8,7 @@
         </div>
 
         <div class="content-section implementation">
-            <Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
+            <Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
                 :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
                 :circular="true" :autoPlay="true" :transitionInterval="3000">
                 <template #item="slotProps">
@@ -23,9 +23,9 @@
                     <div class="custom-galleria-footer">
                         <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
                         <span v-if="images">
-                            <span>{{activeItemIndex + 1}}/{{images.length}}</span>
-                            <span class="title">{{images[activeItemIndex].title}}</span>
-                            <span>{{images[activeItemIndex].alt}}</span>
+                            <span>{{activeIndex + 1}}/{{images.length}}</span>
+                            <span class="title">{{images[activeIndex].title}}</span>
+                            <span>{{images[activeIndex].alt}}</span>
                         </span>
                         <Button :icon="fullScreenIcon" @click="toggleFullScreen" />
                     </div>
@@ -43,7 +43,7 @@ export default {
     data() {
         return {
             images: null,
-            activeItemIndex: 0,
+            activeIndex: 0,
             showThumbnails: false,
             isPreviewFullScreen: false
         }
diff --git a/src/views/galleria/GalleriaFullScreenDemo.vue b/src/views/galleria/GalleriaFullScreenDemo.vue
index e9954715a..aac227d36 100755
--- a/src/views/galleria/GalleriaFullScreenDemo.vue
+++ b/src/views/galleria/GalleriaFullScreenDemo.vue
@@ -35,7 +35,7 @@
             <Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
 
             <h3>Custom Content</h3>
-            <Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
+            <Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
                 :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -84,7 +84,7 @@
 &lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /&gt;
 
 &lt;h3&gt;Custom Content&lt;/h3&gt;
-&lt;Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
+&lt;Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
     :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
@@ -109,7 +109,7 @@ export default {
     data() {
         return {
             images: null,
-            activeItemIndex: 0,
+            activeIndex: 0,
 			responsiveOptions: [
 				{
                     breakpoint: '1024px',
@@ -156,7 +156,7 @@ export default {
     },
     methods: {
         imageClick(index) {
-            this.activeItemIndex = index;
+            this.activeIndex = index;
             this.displayCustom = true;
         }
     }
@@ -175,7 +175,7 @@ export default {
     data() {
         return {
             images: null,
-            activeItemIndex: 0,
+            activeIndex: 0,
 			responsiveOptions: [
 				{
                     breakpoint: '1024px',
@@ -222,7 +222,7 @@ export default {
     },
     methods: {
         imageClick(index) {
-            this.activeItemIndex = index;
+            this.activeIndex = index;
             this.displayCustom = true;
         }
     }
diff --git a/src/views/galleria/GalleriaProgrammaticDemo.vue b/src/views/galleria/GalleriaProgrammaticDemo.vue
index 8cf7395ff..df9766875 100644
--- a/src/views/galleria/GalleriaProgrammaticDemo.vue
+++ b/src/views/galleria/GalleriaProgrammaticDemo.vue
@@ -3,7 +3,7 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Galleria - Programmatic</h1>
-                <p>Galleria can be controlled programmatically using the <b>activeItemIndex</b> property.</p>
+                <p>Galleria can be controlled programmatically using the <b>activeIndex</b> property.</p>
             </div>
         </div>
 
@@ -13,7 +13,7 @@
                 <Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" />
             </div>
 
-            <Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
+            <Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
                 <template #item="slotProps">
 					<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
 				</template>
@@ -33,7 +33,7 @@
     &lt;Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" /&gt;
 &lt;/div&gt;
 
-&lt;Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
+&lt;Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
@@ -51,7 +51,7 @@ export default {
     data() {
         return {
             images: null,
-            activeItemIndex: 2,
+            activeIndex: 2,
 			responsiveOptions: [
 				{
                     breakpoint: '1024px',
@@ -78,11 +78,11 @@ export default {
     computed: {
         activeIndex: {
             get: function() {
-                return this.activeItemIndex;
+                return this.activeIndex;
             },
             set: function(newValue) {
                 if (this.images && 0 &lt;= newValue && newValue &lt;= (this.images.length - 1)) {
-                    this.activeItemIndex = newValue;
+                    this.activeIndex = newValue;
                 }
             }
         }
@@ -102,7 +102,7 @@ export default {
     data() {
         return {
             images: null,
-            activeItemIndex: 2,
+            activeIndex: 2,
 			responsiveOptions: [
 				{
                     breakpoint: '1024px',
@@ -129,11 +129,11 @@ export default {
     computed: {
         activeIndex: {
             get: function() {
-                return this.activeItemIndex;
+                return this.activeIndex;
             },
             set: function(newValue) {
                 if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {
-                    this.activeItemIndex = newValue;
+                    this.activeIndex = newValue;
                 }
             }
         }