From 68f5f88347b06812ea7e2165ec0097bade4ecb49 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Tue, 1 Apr 2025 16:42:08 +1100
Subject: [PATCH] fix: carousel pagination

---
 components/CarouselPagination.vue | 16 +++++++---------
 package.json                      |  1 +
 yarn.lock                         |  5 +++++
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/CarouselPagination.vue b/components/CarouselPagination.vue
index 6ec24ae..132be41 100644
--- a/components/CarouselPagination.vue
+++ b/components/CarouselPagination.vue
@@ -4,7 +4,7 @@
       v-for="(_, i) in amount"
       @click="() => slideTo(i)"
       :class="[
-        currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
+        carousel.currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
         'transition-all cursor-pointer h-2 rounded-full',
       ]"
     />
@@ -12,16 +12,14 @@
 </template>
 
 <script setup lang="ts">
-const maxSlide = inject("maxSlide", ref(1));
-const minSlide = inject("minSlide", ref(1));
-const currentSlide = inject("currentSlide", ref(1));
-const nav: { slideTo?: (index: number) => any } = inject("nav", {});
+import { injectCarousel } from "vue3-carousel";
 
-const amount = computed(() => maxSlide.value - minSlide.value + 1);
+const carousel = inject(injectCarousel)!!;
+
+const amount = carousel.maxSlide - carousel.minSlide + 1;
 
 function slideTo(index: number) {
-  if (!nav.slideTo) return console.warn(`error moving slide: nav not defined`);
-  const offsetIndex = index + minSlide.value;
-  nav.slideTo(offsetIndex);
+  const offsetIndex = index + carousel.minSlide;
+  carousel.nav.slideTo(offsetIndex);
 }
 </script>
diff --git a/package.json b/package.json
index 4f9680d..4f3196e 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "uuid": "^10.0.0",
     "vue": "latest",
     "vue-router": "latest",
+    "vue3-carousel": "^0.15.0",
     "vue3-carousel-nuxt": "^1.1.5",
     "vuedraggable": "^4.1.0"
   },
diff --git a/yarn.lock b/yarn.lock
index a9d0936..f421e8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7214,6 +7214,11 @@ vue3-carousel@^0.13.0:
   resolved "https://registry.yarnpkg.com/vue3-carousel/-/vue3-carousel-0.13.0.tgz#cfacf7eae610a41fad4c3aba56ddb49a7776f416"
   integrity sha512-vio91KI4mVMlCDbVhGzW9nIyYqxu0moqroPR/OrJeaCvAK3SJYxqvH36a4/t1oEJYJsTgh+IuNiNi6c+7DVKZg==
 
+vue3-carousel@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/vue3-carousel/-/vue3-carousel-0.15.0.tgz#6a666566779dd30027a857ec0d92bfef97f15b27"
+  integrity sha512-yYBBEdmvsMNlgKivVHiFMKV7TlWDoMEiVLA+Vb31t1JEQILAQYADMDYYuE9mp6OSGEQpCBgt8e/EpO2MZlQhcw==
+
 vue@^3.5.13, vue@latest:
   version "3.5.13"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.13.tgz#9f760a1a982b09c0c04a867903fc339c9f29ec0a"