Fullscreen TikTok style Swiper with content above and below

[learyjk]

Hello,

I am working on a component similar to TikTok or Reels video UI using Swiper.js

I have a decent mockup working on desktop, but with mobile I cannot page through slides unless I tap the slides themselves first. I tried to simulate a click/tap with intersection observer but no joy.

Is there a way/event to programatically focus the user inside the swiper instance?

Thanks!

site: https://tiktok-vertical-video.webflow.io/

code:

// Select elements on page that we will need
  const slideNumber = document.querySelector(".swiper-slide-num");

  // 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: false,
    speed: speed,
    mousewheel: true,
    touchReleaseOnEdges: false,
    mousewheel: {
      releaseOnEdges: false
    },
    keyboard: {
      enabled: true
    },
    pagination: {
      el: ".swiper-pagination-custom",
      bulletClass: "swiper-bullet-custom",
      bulletActiveClass: "is-active",
      bulletElement: "button",
      clickable: true
    },
    enabled: false
  });

  swiper.on("reachEnd", () => {
    setTimeout(() => {
      // swiper.params.mousewheel.releaseOnEdges = true;
      // swiper.params.touchReleaseOnEdges = true;
      swiper.disable();
      console.log("swiper disabled");
    }, speed);
  });

  swiper.on("reachBeginning", () => {
    setTimeout(() => {
      // swiper.params.mousewheel.releaseOnEdges = true;
      // swiper.params.touchReleaseOnEdges = true;
      swiper.disable();
      console.log("swiper disabled");
    }, speed);
  });

  // 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;
  });

  // 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%" });
  });

  // Get the element
  const swiperSection = document.querySelector("#swiper-section");

  // Create an intersection observer
  const observer = new IntersectionObserver(
    (entries) => {
      // Loop over the entries
      entries.forEach((entry) => {
        // If the swiperSection is in the viewport
        if (entry.isIntersecting) {
          // Run your code here
          console.log("swiperSection is at the top of the viewport!");
          swiper.enable();
        }
      });
    },
    {
      root: null, // relative to the viewport
      rootMargin: "0px",
      threshold: 1.0 // trigger when 100% of the target is visible
    }
  );

  // Start observing the swiperSection
  observer.observe(swiperSection);