How to adjust when Swiper.js advances to the next slide?

Question

What I'm Doing I'm using Swiper.js in Webflow to make two connected vertical sliders, one with images and one with text (title, desc). I'm using the Swiper thumbs module to connect the two sliders. I'm using the Webflow Collection List element as the slider, with the images and text in the CMS.

Link to page: https://zacaria-wilson-portfolio.webflow.io/projects

What I Want When scrolling vertically down the images, I want the text slider to advance to the corresponding slide that matches the current image in view.

The Problem When scrolling, the sliders advance before the corresponding image has scrolled into view. In Chrome Dev Tools, I can see the image slide div class changing from "swiper-slide-active" to "swiper-slide-prev" before the next image has entered the viewport.

Swiper Script:

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
 $(".slider-main_component").each(function (index) {
    var swiper2 = new Swiper($(this).find(".swiper2") [0], {
        direction: "vertical",
        mousewheel: false,
        keyboard: true,
        autoplay: false,
        freemode:false,
        autoHeight: true,
    });

    var swiper1 = new Swiper($(this).find(".swiper") [0], {
     direction: "vertical",
     slidesPerView: "auto",
     autoHeight: true,
     spaceBetween: 100,
     freeMode: true,
     mousewheel: {
              releaseOnEdges: true,
     },
     keyboard: true,
     autoplay: false,
     thumbs: {
             swiper: swiper2,
             multipleActiveThumbs: false,
     },
     navigation: {
            nextEl: $(this).find(".swiper-next")[0],
                    prevEl: $(this).find(".swiper-prev")[0],
        },
      pagination: {
        el: $(this).find(".slider-bullet-wrapper")[0],
        clickable: true,
      },
 });
});
</script>

What I've Tried: I had another issue with Swiper setting the slide div height to be much larger than the image (~5e27px). Setting the image swiper to autoHeight: true, slidesPerView: "auto", resolved that. The slide div now fits the image but still advances before the next slide is in view. Ideally, I want the slide to advance once the top of the image reaches 50vh. I assume that Swiper has some function that determines when to advance slides. I've read through the documentation to the best of my ability and searched, here and the Swiper Git Hub, but can't figure out how to do this.

I would appreciate any advice!