如何调整Swiper.js垂直滑块的幻灯片切换触发时机？

问题分析 #

当前使用Swiper的thumbs模块实现图片与文本滑块关联，但主滑块（图片）开启freeMode: true且为垂直方向时，默认的active状态切换逻辑和你期望的「图片顶部到达50vh时触发同步」不匹配，导致文本滑块提前切换。

解决方案 #

放弃默认的thumbs自动关联，改为手动监听主滑块滚动事件，根据slide的可视位置触发文本滑块同步：

修改后的完整脚本 #

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
$(".slider-main_component").each(function (index) {
    // 文本滑块（原swiper2）
    var textSwiper = new Swiper($(this).find(".swiper2")[0], {
        direction: "vertical",
        mousewheel: false,
        keyboard: true,
        autoplay: false,
        freeMode: false,
        autoHeight: true,
        allowTouchMove: false // 禁止手动滑动，仅通过主滑块控制
    });

    // 图片主滑块（原swiper1）
    var imageSwiper = new Swiper($(this).find(".swiper")[0], {
        direction: "vertical",
        slidesPerView: "auto",
        autoHeight: true,
        spaceBetween: 100,
        freeMode: true,
        mousewheel: {
            releaseOnEdges: true,
        },
        keyboard: true,
        autoplay: false,
        navigation: {
            nextEl: $(this).find(".swiper-next")[0],
            prevEl: $(this).find(".swiper-prev")[0],
        },
        pagination: {
            el: $(this).find(".slider-bullet-wrapper")[0],
            clickable: true,
        },
    });

    // 手动同步逻辑：监听主滑块滚动，判断哪个slide到达50vh位置
    imageSwiper.on("scroll", function() {
        const swiperContainer = this.el;
        const triggerPosition = window.innerHeight * 0.5; // 50vh触发位置
        const containerTop = swiperContainer.getBoundingClientRect().top;
        const relativeTriggerPos = triggerPosition - containerTop; // 相对于swiper容器的触发坐标

        let activeIndex = 0;
        // 遍历所有slide，找到顶部进入50vh区域的目标slide
        this.slides.forEach((slide, index) => {
            const slideTop = slide.offsetTop - this.translate; // slide相对于容器的当前top位置
            if (slideTop <= relativeTriggerPos && slideTop + slide.offsetHeight > relativeTriggerPos) {
                activeIndex = index;
            }
        });

        // 仅当索引变化时触发切换，避免重复执行
        if (textSwiper.activeIndex !== activeIndex) {
            textSwiper.slideTo(activeIndex, 300); // 300ms过渡时长，可按需调整
        }
    });

    // 反向同步：点击文本滑块/分页器时，主滑块滚动到对应位置并对齐50vh
    textSwiper.on("slideChange", function() {
        const targetSlide = imageSwiper.slides[this.activeIndex];
        const containerTop = imageSwiper.el.getBoundingClientRect().top;
        // 计算目标滚动位置，确保slide顶部对齐50vh
        const targetPos = targetSlide.offsetTop - (window.innerHeight * 0.5 - containerTop);
        
        imageSwiper.setTranslate(targetPos);
        imageSwiper.updateActiveIndex();
    });
});
</script>

关键修改说明 #

1. 移除默认thumbs关联：完全放弃Swiper内置的thumbs逻辑，改为自定义同步规则
2. 锁定文本滑块交互：设置allowTouchMove: false，避免用户手动滑动文本滑块导致不同步
3. 滚动位置精准判断：
   • 计算50vh相对于主滑块容器的坐标
   • 遍历slide实时位置，定位进入触发区域的目标slide
   • 仅在索引变化时执行切换，减少冗余DOM操作
4. 反向同步逻辑：确保点击文本滑块或分页器时，主滑块能精准滚动到对应slide并对齐50vh位置

额外优化建议 #

• 若存在响应式图片导致slide高度变化，可在resize事件中重新计算触发位置
• 调整slideTo的过渡时长，让同步动画与滚动节奏更匹配

内容的提问来源于stack exchange，提问作者Zacaria Wilson