fix: carousel pagination

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>