added swiper

.github/workflows/deploy-frontend-dev.yml

@@ -2,6 +2,8 @@ name: DeployFrontendDev
 
 on:
   push:
+    # branches:
+    #   - "master"
 
 
 jobs:

nuxt-frontend/components/backend-development/DevelopmentSection.vue

@@ -13,32 +13,51 @@
         aspirations.
       </p>
     </div>
-    <div id="sticky-parent" class="sticky-parent h-[100vh] bg-[#F8F8F8]">
-      <div class="top-0 main sticky  overflow-hidden">
+    <div id="stickyParent" class="sticky-parent h-[150vh]">
+      <div class="sticky top-0 h-screen main overflow-hidden">
         <swiper
+          :direction="'vertical'"
           :slidesPerView="1"
           :centeredSlides="true"
-          :direction="'vertical'"
-          :mousewheel="true"
+          :spaceBetween="0"
+          :speed="500"
+          :mousewheel="{
+            enabled: false,
+            releaseOnEdges: true,
+          }"
+          :modules="modules"
+          class="swiper-container !h-screen"
+          ref="setSwiperRef"
         >
           <swiper-slide
             v-for="(item, index) in items"
             :key="index"
-            class="section flex flex-col lg:flex-row container"
+            class="section flex container h-screen"
           >
-            <div class="flex-1 relative">
-              <div
-                class="my-auto absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-              >
-                <img :src="item.image" class="w-8 lg:w-16" :alt="item.title" />
+            <div class="flex flex-col">
+              <div class="flex-1 relative">
+                <div
+                  class="w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+                ></div>
+                <div
+                  class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+                >
+                  <img
+                    :src="item.image"
+                    class="w-10 lg:w-16"
+                    :alt="item.title"
+                  />
+                </div>
+              </div>
+              <div class="flex-1 flex flex-col gap-4 my-auto">
+                <h3 class="header-3" :class="item.className">
+                  {{ item.title }}
+                </h3>
+                <span
+                  v-html="item.description"
+                  class="sub-h3-regular lg:sub-h3-medium flex flex-col gap-4 text-black-core/[0.6]"
+                ></span>
               </div>
-            </div>
-            <div class="flex-1 flex flex-col gap-4 my-auto">
-              <h3 class="header-3" :class="item.className">{{ item.title }}</h3>
-              <span
-                v-html="item.description"
-                class="sub-h3-regular lg:sub-h3-medium flex flex-col gap-4 text-black-core/[0.6]"
-              ></span>
             </div>
           </swiper-slide>
         </swiper>
@@ -48,13 +67,13 @@
 </template>
 <script setup>
 import { Swiper, SwiperSlide } from "swiper/vue";
+import { Mousewheel } from "swiper/modules";
 import custom from "@/assets/images/backend-development/development/customarchitecture.webp";
 import development from "@/assets/images/backend-development/development/Development.webp";
 import database from "@/assets/images/backend-development/development/DatabaseDesign.webp";
 import performance from "@/assets/images/backend-development/development/PerformanceOptimization.webp";
 import migration from "@/assets/images/backend-development/development/Migration.webp";
 import security from "@/assets/images/backend-development/development/Security.webp";
-
 const items = [
   {
     title: "Custom Backend Architecture",
@@ -106,22 +125,26 @@ const items = [
     <span>We promote regular training sessions and workshops on the latest developments in the industry and encourage the team to stay updated with all the security and regulatory compliances.</span>`,
   },
 ];
-
+const modules = [Mousewheel];
 const handleScroll = () => {
-  const stickyParent = document.querySelector(".sticky-parent");
-  const sticky = document.querySelector(".main");
-  const items = document.querySelector(".section");
-  const stickyHeight = sticky.getBoundingClientRect().height;
+  const stickyParent = document.getElementById("stickyParent");
+  const stickyTop = stickyParent.offsetTop;
+  var position = stickyParent.getBoundingClientRect();
 
-  let scrolled = stickyParent.getBoundingClientRect().top;
+  const sticky = document.querySelector(".main");
+  const items = document.querySelectorAll(".section");
 
-  if (scrolled > -100) {
-    sticky.scrollTop = 0;
+  if (
+    window.pageYOffset >= stickyTop &&
+    position.bottom >=
+      (window.innerHeight || document.documentElement.clientHeight)
+  ) {
+    Mousewheel.enable();
   } else {
-    sticky.scrollTop =
-      stickyParent.getBoundingClientRect().height - stickyHeight;
+    Mousewheel.disable();
   }
 };
+
 onMounted(() => {
   window.addEventListener("scroll", handleScroll);
 });