Full screen Slider full page not working with popups and card carousal

just want to creating a website with a full-page slider that allows me to access different sections by either clicking on the pagination on the right or by scrolling down ,This is the code of the sliders.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.0.5/swiper-bundle.css" integrity="sha512-CTWIgc35lLPcCl1OP7MNcrrES+jyBBvMEz8Cqx/v0hifPNjIpPsd/jUYTJ/41CYCrQdfuw7LopKaqqjXVLqejg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.0.5/swiper-bundle.min.js" integrity="sha512-cEcJcdNCHLm3YSMAwsI/NeHFqfgNQvO0C27zkPuYZbYjhKlS9+kqO5hZ9YltQ4GaTDpePDQ2SrEk8gHUVaqxig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

<script>
window.Webflow ||= [];
window.Webflow.push(() => {
  // Select elements on page that we will need
  const slideNumber = document.querySelector(".swiper-slide-num");
  const headings = document.querySelectorAll(".heading");

  // Store speed in a variable since we'll want to use it for animations too.
  const speed = 800;

  // Define Swiper instance
  const swiper = new Swiper(".swiper", {
    // optional parameters
    direction: "vertical",
    loop: true,
    speed: speed,
    mousewheel: true,
    keyboard: {
      enabled: true
    },
    pagination: {
      el: ".swiper-pagination-custom",
      bulletClass: "swiper-bullet-custom",
      bulletActiveClass: "is-active",
      bulletElement: "button",
      clickable: true
    }
  });

  // event that fires when swiper.activeIndex changes
  swiper.on("activeIndexChange", () => {
    // be careful which index you use! We want realIndex in this case
    let activeIndex = swiper.activeIndex;
    let realIndex = swiper.realIndex;
    // change out slide number
    slideNumber.textContent = realIndex + 1;

    // animate the heading with CSS transitions.
    headings.forEach((heading) => heading.classList.remove("is-active"));
    headings[realIndex].classList.add("is-active");
  });

  // event that fires when swiper goes to next slide
  swiper.on("slideNextTransitionStart", () => {
    gsap
      .timeline({ defaults: { duration: speed / 2000 } })
      .to(".front", { translateY: "100%" })
      .set(".front", { translateY: "-100%" })
      .to(".front", { translateY: "0%" });
  });

  // event that fires when swiper goes to previous slide
  swiper.on("slidePrevTransitionStart", () => {
    gsap
      .timeline({ defaults: { duration: speed / 2000 } })
      .to(".front", { translateY: "-100%" })
      .set(".front", { translateY: "100%" })
      .to(".front", { translateY: "0%" });
  });
});

</script>

While the sliders are functioning correctly, I have issues when attempting to include a scroll-through carousel card within my sections , the scroll-through carousel cards are not working as intended. also, I have added a popup in one of the sections, which opens normally. but if I attempt to scroll inside the popup without clicking on the popup scrollbar, the page scrolls to another slider.


Here is my site Read-Only: [LINK][1]

[1]: http:// Webflow - efg SR-2022

Here is other site Read-Only: [LINK][2] Webflow - sr22

i’m just want to make my website {2} (with the popups scroll and card carousel } but with the full page sliders function that i have in my website {1}