From 9ae9f077ce1ae4e0b8208d9c911f73b850f0ff9d Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Mon, 8 Jul 2024 14:32:30 +0200
Subject: [PATCH] ---

---
 app.vue                               |  2 +-
 src/components/Ml/Slider/MlSlider.vue | 29 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/app.vue b/app.vue
index 3414cc5..fa2fb7d 100644
--- a/app.vue
+++ b/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"
     >
diff --git a/src/components/Ml/Slider/MlSlider.vue b/src/components/Ml/Slider/MlSlider.vue
index fb13b7a..d4ffa64 100644
--- a/src/components/Ml/Slider/MlSlider.vue
+++ b/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>