---

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>