Add pagination

frontend/components/home/ProductsShowcase.vue

@@ -8,6 +8,7 @@ import { motion } from "motion-v";
 
 const { data: homeData } = useHomeData();
 
+const sliderTimer = ref<NodeJS.Timeout | null>(null);
 const activeSlide = ref(0);
 
 const variants = {
@@ -83,6 +84,11 @@ const childImageVariants = {
     },
 };
 
+const slideTo = (index: number) => {
+    activeSlide.value = index;
+    restartSliderTimer();
+};
+
 const nextSlide = () => {
     const slidesCount = homeData.value!.show_case_slider.length;
     if (activeSlide.value > slidesCount - 2) {
@@ -92,12 +98,16 @@ const nextSlide = () => {
     }
 };
 
-onMounted(() => {
-    nextSlide();
-
-    setInterval(() => {
+const restartSliderTimer = () => {
+    if (sliderTimer.value) clearInterval(sliderTimer.value);
+    sliderTimer.value = setInterval(() => {
         nextSlide();
     }, 5000);
+};
+
+onMounted(() => {
+    nextSlide();
+    restartSliderTimer();
 });
 </script>
 
@@ -177,6 +187,20 @@ onMounted(() => {
                         :variants="childContentVariants"
                         class="flex flex-col items-center justify-center gap-6 text-center"
                     >
+
+                        <div class="flex items-center flex-row-reverse gap-4 mb-4">
+                            <button
+                                v-for="(_slide, index) in homeData!.show_case_slider"
+                                @click="slideTo(index)"
+                                class="py-4 cursor-pointer active:scale-90 transition-transform"
+                            >
+                                <div
+                                    class="h-1 w-12 sm:w-18 lg:w-24 rounded-full"
+                                    :class="activeSlide === index ? 'bg-blue-500' : 'bg-white/15'"
+                                ></div>
+                            </button>
+                        </div>
+
                         <span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
                             {{ slide.title }}
                         </span>