---

src/components/Ml/Slider/MlSlider.vue

@@ -27,36 +27,6 @@
         <slot :item="item" />
       </swiper-slide>
     </swiper>
-    <div>
-      <div :class="counterClasses">
-        <div
-          class="bg-BgDark dark:bg-BgLight mt-4 h-1 transition-all duration-500"
-          :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>
 
@@ -123,7 +93,10 @@ const classes = ref({
   counter: {
     class: `max-w-[1200px] mx-auto px-6 container`,
   },
-} as PTAttribs);
+  progress: {
+    class: "",
+  },
+} as unknown as PTAttribs);
 
 const rootClasses = computed(() =>
   twMerge(classes.value.root?.class, props.pt?.root?.class)
@@ -134,6 +107,9 @@ const sliderClasses = computed(() =>
 const counterClasses = computed(() =>
   twMerge(classes.value.counter?.class, props.pt?.counter?.class)
 );
+const progressClass = computed(() =>
+  twMerge(classes.value.progress?.class, props.pt?.progress?.class)
+);
 
 const items = props.items;
 </script>