create sliders with vue3-carousel package

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .nuxt/
+pages/text.vue

assets/css/main.css

@@ -61,6 +61,17 @@ body {
     background-position-y: -10vw;
 }
 @media (max-width: 768px) {
+    .carousel__pagination-item button::after {
+        width: 14vw !important;
+        height: 1vw !important;
+        padding: 0px !important;
+        margin: 0px 0.1vw !important;
+        border-radius: 10vw;
+    }
+    .carousel__pagination {
+        margin-top: 26.5vw !important;
+        margin-bottom: 21vw !important;
+    }
     .ourStory {
         background-image: url("/public/images/aboutBg.jpg");
         background-repeat: no-repeat;
@@ -173,7 +184,6 @@ body {
 .imgWrap .right:before {
     background-position: -2001.4% 0;
 }
-section{}
 
 .contact {
     background-image: url("/public/images/aboutBg.jpg");
@@ -184,13 +194,43 @@ section{}
 }
 
 .slide1 {
-    background-image: url('/public/images/slider.jpg');
+    background-image: url("/public/images/slider.jpg");
     background-repeat: no-repeat;
     background-size: cover;
-
 }
+
 .mediagallery {
-    background-image: url('/public/images/gallery2.jpg');
+    background-image: url("/public/images/gallery2.jpg");
     background-size: cover;
-
 }
+.carousel__pagination-item button::after {
+    width: 5.365vw;
+    height: 0.25vw;
+    padding: 0px !important;
+    margin: 0px 0.1vw !important;
+    border-radius: 10vw;
+}
+
+:root {
+    --vc-clr-primary: #a62186 !important;
+    --vc-clr-secondary: #e5e5e5 !important;
+    --vc-clr-white: #ffffff;
+}
+.carousel__slide{
+    padding-right: 4vw !important;
+    display: flex;
+    justify-content: end !important;
+}
+.carousel__viewport {
+    height: 100% !important;
+    width: 100% !important;
+    text-align: end;
+    position: relative !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.carousel__pagination {
+    margin-top: 10.5vw !important;
+}
+

components/home-page/AboutUs.vue

@@ -130,4 +130,9 @@
   </div>
 </template>
 <script setup>
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+
+// Import Swiper styles
+import 'swiper/css';
+
 </script>

components/home-page/MediaSlider.vue

@@ -1,57 +1,41 @@
 <template>
-  <div class="flex flex-col lg:flex-row pb-[15vw] lg:pb-[5vw] px-[2vw] pt-[6.5vw]">
+  <div
-    <div class="w-full lg:w-[35%] flex flex-col ps-[8vw] lg:ps-0">
+    class="flex flex-col lg:flex-row pb-[15vw] lg:pb-[5vw] px-[2vw] pt-[6.5vw]"
+  >
+    <div
+      class="w-full lg:w-[25%] flex flex-col ps-[8vw] lg:ps-0 border-e-[1px]"
+    >
       <div class="flex justify-between">
         <p
           class="mt-[2vw] lg:mt-0 lg:py-0 py-[3vw] text-[4.544vw] lg:text-[1.481vw] text-[#383E43] font-semibold"
         >
           رسانه
         </p>
+        <div class="hidden lg:flex h-[50px] me-[0.5vw]">
           <svg
-          class="hidden lg:block"
+          class="cursor-pointer "
-          width="112"
+          @click="this.$refs.carousel.next()"
-          height="50"
+          width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-          viewBox="0 0 112 50"
+            <circle cx="25" cy="25" r="24.5" transform="rotate(-180 25 25)" stroke="#878787"/>
-          fill="none"
+            <path d="M22.0002 17.0799L28.5202 23.5999C29.2902 24.3699 29.2902 25.6299 28.5202 26.3999L22.0002 32.9199" stroke="#878787" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-          xmlns="http://www.w3.org/2000/svg"
+            </svg>
-        >
+            <svg
+            class="cursor-pointer ms-[0.5vw]"
+            @click="this.$refs.carousel.prev()"
+            width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
               <circle cx="25" cy="25" r="24.5" stroke="#383E43"/>
-          <g clip-path="url(#clip0_836_14506)">
+              <g clip-path="url(#clip0_836_14507)">
-            <path
+              <path d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801" stroke="#383E43" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-              d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801"
-              stroke="#383E43"
-              stroke-width="2"
-              stroke-miterlimit="10"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
               </g>
-          <circle
-            cx="87"
-            cy="25"
-            r="24.5"
-            transform="rotate(-180 87 25)"
-            stroke="#878787"
-          />
-          <path
-            d="M84.0002 17.0799L90.5202 23.5999C91.2902 24.3699 91.2902 25.6299 90.5202 26.3999L84.0002 32.9199"
-            stroke="#878787"
-            stroke-width="2"
-            stroke-miterlimit="10"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
               <defs>
-            <clipPath id="clip0_836_14506">
+              <clipPath id="clip0_836_14507">
-              <rect
+              <rect width="24" height="24" fill="white" transform="translate(13 13)"/>
-                width="24"
-                height="24"
-                fill="white"
-                transform="translate(13 13)"
-              />
               </clipPath>
               </defs>
               </svg>
+              
+              
+        </div>
       </div>
 
       <div class="mt-[1vw] space-y-[1vw] text-[#878787]">
@@ -166,6 +150,27 @@
       </div>
     </div>
 
+    <Carousel
+      ref="carousel"
+      class="lg:w-[75%] mt-[8vw] lg:mt-0  w-full"
+      :wrap-around="true"
+      :breakpoints="breakpoints"
+    >
+      <Slide v-for="slide in 10" :key="slide">
+        <div
+          class="carousel-item h-[85.641vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
+        >
+          <div
+            class="mx-[3vw] md:mx-[1vw] mediagallery w-[53.846vw] lg:w-[18.073vw] h-[76.41vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
+          ></div>
+        </div>
+      </Slide>
+
+ 
+    </Carousel>
+
+
+    <!-- 
     <div
       class="mt-[8vw] lg:mt-0 w-full grid grid-cols-1 lg:grid-cols-3 border-s-none lg:border-s-[1px] ms-0 lg:ms-[3vw] ps-0 lg:ps-[1vw]"
     >
@@ -199,6 +204,28 @@
           class="mediagallery lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
         ></div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
+
+<script>
+
+export default defineComponent({
+  name: 'Breakpoints',
+  data: () => ({
+
+    breakpoints: {
+      // 700px and up
+      700: {
+        itemsToShow: 1,
+        snapAlign: 'center',
+      },
+      // 1024 and up
+      1024: {
+        itemsToShow: 3.3,
+        snapAlign: 'start',
+      },
+    }
+  })
+})
+</script>

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="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 ps-[4vw]">
+    <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>
+          </svg> -->
-          
+    </div>
   </div>
 </template>

nuxt.config.ts

@@ -2,7 +2,14 @@
 export default defineNuxtConfig({
   
   devtools: { enabled: true },
-  modules: ['@nuxtjs/tailwindcss', '@hypernym/nuxt-gsap',  'nuxt3-leaflet']
+  modules: [
+    '@nuxtjs/tailwindcss',
+    '@hypernym/nuxt-gsap',
+    'nuxt3-leaflet',
+    'nuxt-swiper',
+    "vue3-carousel-nuxt",
+    
+  ]
   ,
   tailwindcss: {
     // Options
@@ -18,4 +25,6 @@ export default defineNuxtConfig({
   css : ['~/assets/css/main.css'],
  
 
+
+
 })

package-lock.json

@@ -10,8 +10,11 @@
         "gsap": "^3.12.5",
         "leaflet": "^1.9.4",
         "nuxt": "^3.11.2",
+        "nuxt-swiper": "^1.2.2",
+        "swiper": "^11.1.1",
         "vue": "^3.4.21",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.0",
+        "vue3-carousel-nuxt": "^1.1.1"
       },
       "devDependencies": {
         "@hypernym/nuxt-gsap": "^2.4.2",
@@ -7990,6 +7993,33 @@
         "gsap": "^3.11.5"
       }
     },
+    "node_modules/nuxt-swiper": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/nuxt-swiper/-/nuxt-swiper-1.2.2.tgz",
+      "integrity": "sha512-y4s/srISP4OuhXbYg9/W1/6EWnbcoHRGEKBKAvGP0I2h0b3enhqZNEk7854M3F89ys8waacBXektPzamgl5xwQ==",
+      "dependencies": {
+        "@nuxt/kit": "^3.7.0",
+        "swiper": "^10.2.0"
+      }
+    },
+    "node_modules/nuxt-swiper/node_modules/swiper": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz",
+      "integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/nuxt3-leaflet": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/nuxt3-leaflet/-/nuxt3-leaflet-1.0.12.tgz",
@@ -10264,6 +10294,24 @@
         "url": "https://opencollective.com/svgo"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.1.tgz",
+      "integrity": "sha512-jGmEA/fNz1lACIcY4/40ggm1Gcyv+EUivmgV/Jd2WFPsEJhbWXnRAwzZR8OPjkBLtDxmzcoYG/iiAMWfRs0YKQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/system-architecture": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/system-architecture/-/system-architecture-0.1.0.tgz",
@@ -11566,6 +11614,23 @@
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
       "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
     },
+    "node_modules/vue3-carousel": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.3.tgz",
+      "integrity": "sha512-VsuOBE4LG9lxAiYGR9U7ps4RyJ4oFQGzk79/49ybvoxzNpahPAVWIDHKK3a1lOv0CSplFq6u4FvaFLZ8x3FgWg==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue3-carousel-nuxt": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vue3-carousel-nuxt/-/vue3-carousel-nuxt-1.1.1.tgz",
+      "integrity": "sha512-vhsHeB1bjTPSrKUmci0saXA2ueT4g7WArCG2cv6NzXiVnyaPZUCUjZcPcwTqQ86amRUjg92NgGhOlgDsz4pNHg==",
+      "dependencies": {
+        "@nuxt/kit": "^3.11.0",
+        "vue3-carousel": "^0.3.3"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

package.json

@@ -13,8 +13,11 @@
     "gsap": "^3.12.5",
     "leaflet": "^1.9.4",
     "nuxt": "^3.11.2",
+    "nuxt-swiper": "^1.2.2",
+    "swiper": "^11.1.1",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vue3-carousel-nuxt": "^1.1.1"
   },
   "devDependencies": {
     "@hypernym/nuxt-gsap": "^2.4.2",

pages/test.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="relative h-[97.436vw] md:h-[45.938vw] flex flex-col items-center">
+    <Carousel :autoplay="2000" :wrap-around="true" paginationColor="gray" paginationActiveColor="red">>
+        <Slide v-for="slide in 3" :key="slide">
+          <div class="carousel__item">{{ slide }}</div>
+        </Slide>
+    
+        <template #addons>
+          <Pagination />
+        </template>
+      </Carousel>
+  </div>
+
+</template>
+
+
+
+
+<script setup>
+
+</script>
+
+
+
+
+
+
+<style scoped>
+</style>
+