---

app.vue

@@ -82,7 +82,7 @@
         root: { class: '' },
         slider: { class: 'bg-black text-white' },
         counter: { class: '' },
-        progress: { class: '' },
+        progress: { class: 'bg-dark mt-4 h-1 transition-all duration-500' },
       }"
       class="my-[50px] relative z-30"
     >

src/components/Ml/Slider/MlSlider.vue

@@ -27,6 +27,35 @@
         <slot :item="item" />
       </swiper-slide>
     </swiper>
+    <div>
+      <div :class="counterClasses">
+        <div :class="progressClass"
+          :style="`width: ${progerssBar}%`"
+        ></div>
+        <div class="flex justify-between my-4">
+          <button
+            :disabled="isPrevDisabled"
+            class="px-4 py-2 disabled:text-gray-400 cursor-pointer"
+            @click="
+              useRipple($event, true);
+              goPrev();
+            "
+          >
+            <ArrowLeftIcon class="size-5" />
+          </button>
+          <button
+            :disabled="isNextDisabled"
+            class="px-4 py-2 disabled:text-gray-400 cursor-pointer"
+            @click="
+              useRipple($event, true);
+              goNext();
+            "
+          >
+            <ArrowRightIcon class="size-5" />
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>