From e274666d4d0c7568569699f8621b23ffee7e4a98 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 8 Sep 2021 14:41:51 +0300
Subject: [PATCH] Fixed #1523 - Thumbnails are not displayed correctly on
 Galleria if numVisible is greater than the length of value

---
 src/components/galleria/Galleria.vue        |  1 +
 src/components/galleria/GalleriaContent.vue | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index ba30b8ca7..ba5ed7929 100755
--- a/src/components/galleria/Galleria.vue
+++ b/src/components/galleria/Galleria.vue
@@ -286,6 +286,7 @@ export default {
 
 .p-galleria-thumbnail-items-container {
     overflow: hidden;
+    width: 100%;
 }
 
 .p-galleria-thumbnail-items {
diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
index 536809b9a..2455bbd71 100755
--- a/src/components/galleria/GalleriaContent.vue
+++ b/src/components/galleria/GalleriaContent.vue
@@ -13,7 +13,7 @@
                 @start-slideshow="startSlideShow" @stop-slideshow="stopSlideShow" />
 
             <GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" v-model:activeIndex="activeIndex" :templates="$attrs.templates"
-                :numVisible="$attrs.numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
+                :numVisible="numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
                 :isVertical="isVertical()" :contentHeight="$attrs.verticalThumbnailViewPortHeight" :showThumbnailNavigators="$attrs.showThumbnailNavigators"
                 v-model:slideShowActive="slideShowActive" @stop-slideshow="stopSlideShow" />
         </div>
@@ -39,12 +39,21 @@ export default {
         return {
             id: this.$attrs.id || UniqueComponentId(),
             activeIndex: this.$attrs.activeIndex,
+            numVisible: this.$attrs.numVisible,
             slideShowActive: false
         }
     },
     watch: {
+        '$attrs.value': function(newVal) {
+            if (newVal && newVal.length < this.numVisible) {
+                this.numVisible = newVal.length;
+            }
+        },
         '$attrs.activeIndex': function(newVal) {
             this.activeIndex = newVal;
+        },
+        '$attrs.numVisible': function(newVal) {
+            this.numVisible = newVal;
         }
     },
     updated() {