create sliders with vue3-carousel package

components/honor-page/Slider.vue

@@ -1,6 +1,33 @@
 <template>
-    <div class="relative h-[97.436vw] md:h-[45.938vw] flex flex-col items-center">
-        <div class="slide1 h-[100%] w-full text-white flex flex-col justify-center ps-[4vw]">
+  <div class="relative h-[97.436vw] md:h-[45.938vw] flex flex-col">
+    <div
+      class="slide1 h-[100%] w-full text-white flex flex-col justify-center"
+    >
+      <Carousel :autoplay="5000" :wrap-around="true"
+
+      
+      >
+        <Slide v-for="slide in 3" :key="slide">
+          <div class="carousel__item ">
+            <h1 class="text-[6.469vw] md:text-[2.457vw] font-semibold">
+              فروشگاه محصولات
+              <span class="text-[#A62186]">ارگانیک</span>
+            </h1>
+            <p class="text-[3.19vw] md:text-[0.938vw] w-[100%] md:w-[39.531vw]">
+              وب سایت جوانه شرکتی در حوزه تامین و توزیع محصولات طبیعی، ارگانیک و
+              سالم میباشد که این امکان را به مصرف کننده میدهد تا بتواند انواع
+              محصولات تازه را با حق انتخاب و تنوع بسیار بالا و با مناسب‌ترین
+              قیمت داشته باشد.
+            </p>
+          </div>
+        </Slide>
+
+        <template #addons>
+          <Pagination />
+        </template>
+      </Carousel>
+
+      <!--             
           <h1 class="text-[6.469vw] md:text-[2.457vw] font-semibold">
               فروشگاه محصولات
               <span class="text-[#A62186]">ارگانیک</span>
@@ -15,7 +42,7 @@
           <path d="M3 3H106" stroke="#A62186" stroke-width="5" stroke-linecap="round"/>
           <path d="M130 3H233" stroke="#E5E5E5" stroke-width="5" stroke-linecap="round"/>
           <path d="M257 3H360" stroke="#E5E5E5" stroke-width="5" stroke-linecap="round"/>
-          </svg>
-          
-      </div>
+          </svg> -->
+    </div>
+  </div>
 </template>