使用Swiper.js实现幻灯片前置与后置添加的异常问题排查

我帮你梳理下这个问题的核心原因，以及对应的解决思路和代码优化方案：

问题根源分析 #

你遇到的情况大概率是Swiper内部DOM状态跟踪的时序冲突，结合你的代码来看有几个关键点：

1. 你把prependSlide和appendSlide放在了两个独立的$(function(){})回调里，虽然jQuery会按顺序执行ready回调，但Swiper对DOM的更新是异步的，连续的前后添加操作可能导致它内部的slide索引、DOM节点列表出现混乱。
2. 开启的observer: true和observeParents: true会监听DOM变化自动更新Swiper，但连续调用prepend/append会触发多次不必要的更新，进一步加剧状态不一致。
3. 你用了setTimeout来清理空slide，延迟操作可能和Swiper的内部更新逻辑冲突，导致部分slide未被正确识别。

优化后的代码方案 #

把所有DOM操作和Swiper控制逻辑整合到同一个上下文里，同时调整observer的时机，避免冲突：

/* 项目图片Swiper轮播脚本 */
const swiper = new Swiper(".swiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: ".swiper-pagination",
        type: "fraction",
    },
    initialSlide: 0,
    slidesPerView: "auto",
    spaceBetween: 0,
    freeMode: true,
    mousewheel: true,
    loop: false,
    // 先关闭observer，避免频繁触发更新
    observer: false,
    observeParents: false,
});

$(function () {
    // 一次性完成前后slide的添加
    swiper.prependSlide([
        '<div class="swiper-slide slide--1"></div>',
        '<div class="swiper-slide slide--2"></div>',
        '<div class="swiper-slide slide--3"></div>',
    ]);
    
    swiper.appendSlide([
        '<div class="swiper-slide slide--4"></div>',
        '<div class="swiper-slide slide--5"></div>',
        '<div class="swiper-slide slide--6"></div>',
    ]);

    // 立即插入视频元素
    $(".slide--1").append($(".merge-vid"));
    $(".slide--2").append($(".merge-vid-2"));
    $(".slide--3").append($(".merge-vid-3"));
    $(".slide--4").append($(".merge-vid-4"));
    $(".slide--5").append($(".merge-vid-5"));
    $(".slide--6").append($(".merge-vid-6"));

    // 移动端视频配置
    if (window.matchMedia("(max-width: 990px)").matches) {
        $(".project-vid").removeAttr("autoplay loop").attr("controls", "controls");
        console.log("mobile video");
    }

    // 清理空slide和无有效src的视频slide
    $(".swiper-slide").filter(":empty").remove();
    $('video source[src=""]').parents(".swiper-slide").remove();

    // 手动更新Swiper状态并定位到初始slide
    swiper.update();
    swiper.slideTo(0, 0);
    console.log("slided");

    // 重新开启observer，监听后续DOM变化
    swiper.params.observer = true;
    swiper.params.observeParents = true;
    swiper.observer.init();
});

关键修改点说明 #

• 合并DOM操作上下文：把prepend、append、视频插入、清理逻辑都放在同一个$(function(){})里，保证所有操作同步执行，避免时序冲突。
• 临时关闭observer：在批量DOM操作期间关闭自动更新，防止Swiper频繁触发内部状态计算，操作完成后再手动开启。
• 移除不必要的setTimeout：在ready回调中执行这些操作时，DOM已经就绪，延迟操作反而会导致Swiper状态不一致，直接同步处理即可。
• 简化视频属性操作：用链式调用合并多个jQuery属性操作，让代码更简洁。

另外，如果优化后仍有问题，建议检查你的Swiper版本，部分旧版本可能存在同时调用prepend/append的已知bug，升级到最新稳定版通常能解决这类问题。

内容的提问来源于stack exchange，提问作者Jsph Bngrnd