diff --git a/doc/galleria/ControlledDoc.vue b/doc/galleria/ControlledDoc.vue
index 5bca3253f..33a20c8ff 100644
--- a/doc/galleria/ControlledDoc.vue
+++ b/doc/galleria/ControlledDoc.vue
@@ -103,10 +103,10 @@ export default {
     },
     methods: {
         next() {
-            this.activeIndex = this.activeIndex === this.images.length - 1 ? 0 : this.activeIndex + 1;
+            this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
         },
         prev() {
-            this.activeIndex = this.activeIndex === 0 ? 0 : this.images.length - 1;
+            this.activeIndex = this.activeIndex === 0 ? 0 : this.activeIndex - 1;
         }
     }
 };
@@ -155,10 +155,10 @@ const responsiveOptions = ref([
 ]);
 
 const next = () => {
-    activeIndex.value = activeIndex.value === images.value.length - 1 ? 0 : activeIndex.value + 1;
+    activeIndex.value = activeIndex.value === images.value.length - 1 ? images.value.length - 1 : activeIndex.value + 1;
 };
 const prev = () => {
-    activeIndex.value = activeIndex.value === 0 ? 0 : images.value.length - 1;
+    activeIndex.value = activeIndex.value === 0 ? 0 : activeIndex.value - 1;
 };
 <\/script>`,
                 data: `
@@ -179,10 +179,10 @@ const prev = () => {
     },
     methods: {
         next() {
-            this.activeIndex = this.activeIndex === this.images.length - 1 ? 0 : this.activeIndex + 1;
+            this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
         },
         prev() {
-            this.activeIndex = this.activeIndex === 0 ? 0 : this.images.length - 1;
+            this.activeIndex = this.activeIndex === 0 ? 0 : this.activeIndex - 1;
         }
     }
 };