Swiper.js - multiple fullscreen vertical swipers with a landing page above it locking users in

Question

We have been building a site that uses 3x Swipers (all connected). This is all working great but the issue that we have encountered is disabling the swipers when the user comes back up to the first slide, to go back to the landing page

Our working vertical scroller

We are initializing our swipers with a gSap timeline that when the slide hits the top of the screen it toggles it on.

 let tlsliderintro = gsap.timeline({
    scrollTrigger: {
      trigger: ".section_home-slider",
      start: "top top",
      end: "bottom bottom",
      scrub: true,
    },
    onStart: () => {
      // Disable Swipers when the timeline starts
      disableSwipers();
    },
    onComplete: () => {
      // Init swipers once it is fully in view
      initializeSwiper();
      console.log('Swipers initialised);
    },
  });

I have tried the below to get this working:

let isFirstSlideInView = false;
let hasNavigatedAway = false;

  // Function to disable Swipers
function disableSwipers() {
  $(".swiper.home-bg, .swiper.home-front, .swiper.home-text").each(function () {
      const swiperInstance = this.swiper;
      if (swiperInstance) {
        swiperInstance.disable();
        console.log('Swipers disabled');
      }
  });
}

// Function to enable Swipers
function enableSwipers() {
  $(".swiper.home-bg, .swiper.home-front, .swiper.home-text").each(function () {
      const swiperInstance = this.swiper;
      if (swiperInstance) {
        swiperInstance.enable();
        console.log('Swipers enabled');
      }
  });
}

function checkFirstSlideInView() {
    const firstSlide = document.querySelector('.swiper.home-text .swiper-slide:first-child');
    isFirstSlideInView = isInViewport(firstSlide);
    if (isFirstSlideInView && !hasNavigatedAway) {
      console.log('First slide is in view');
      enableSwipers();
    } else {
      disableSwipers();
    }

    if (isFirstSlideInView) {
    hasNavigatedAway = false;
    }
  }

  
  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  document.addEventListener('scroll', function(event) {
    checkFirstSlideInView();
  });

The idea was to get the first slide of the controling Swiper 'home-text' and track when that was seen next if it was seen again we have this in our gsap timeline

    onEnter: () => {
      checkFirstSlideInView();
      hasNavigatedAway = false;
    },

Seems no one has tried to get around this issue, all examples of vertically connected scrollers don't have a landing to go back up to they just lock the user into the swiper?

Any pointers or ideas would be great!