同一页面部署两个Swiper轮播运行异常的解决方法

同页面放置多个Swiper时运行失效，核心问题是HTML结构不规范、初始化时机错误，和类名修改无关，按以下步骤调整即可恢复正常运行。

现存核心问题 #

• 单页面存在多个<body>标签：两段代码各写了一个body，HTML标准规定一个页面只能存在1个body标签，多写会导致DOM树解析错乱
• 标签闭合/嵌套错误：
  • 第一个轮播的swiper-wrapper、外层swiper容器缺失闭合标签，DOM结构断裂
  • 第一个轮播所有img标签末尾多写了冗余的>符号
  • 第二个轮播的swiper-wrapper下多嵌套了一层无内容、未闭合的swiper-slide标签，导致Swiper计算slide尺寸、位置时出错
• 初始化时机错误：第一个轮播的初始化脚本直接插在swiper-wrapper内部，此时Swiper容器还未渲染完成，初始化会拿到错误的DOM节点参数
• 全局变量冲突：两个Swiper实例都用swiper作为变量名，全局作用域下后初始化的实例会覆盖前一个，导致实例方法调用异常

修复操作步骤 #

1. 整页只保留1个<body>标签，所有轮播DOM都放在这同一个body内部
2. 修正所有HTML语法错误：补全缺失的闭合标签，删除冗余的标签符号和多余的嵌套slide节点，保证Swiper严格遵循官方要求的DOM结构：swiper容器 > swiper-wrapper > 多个并列swiper-slide
3. 把所有Swiper初始化脚本移动到全部DOM节点的末尾，即</body>标签之前；如果需要把脚本放在head里，就把初始化逻辑包裹在DOMContentLoaded事件回调中，确保DOM完全渲染后再执行初始化
4. 两个Swiper实例使用不同的变量名存储，避免全局变量覆盖
5. 检查页面的Swiper资源引入，确保只引入1次Swiper的CSS和JS文件，重复引入也会导致实例运行异常

修正后可直接运行的代码 #

<body>
  <!-- 第一个Coverflow效果轮播 -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-17-1.png" />
      </div>
      <div class="swiper-slide">
        <img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-18-1.png" />
      </div>
      <div class="swiper-slide">
        <img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-9-1.png" />
      </div>
    </div>
  </div>

  <!-- 第二个Fade效果轮播 -->
  <div class="swiper mySwiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/דנאי.jpg" />
      </div>
      <div class="swiper-slide">
        <img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/שף.jpg" />
      </div>
      <div class="swiper-slide">
        <img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/רונית.jpg" />
      </div>
    </div>
  </div>

  <!-- DOM加载完成后统一初始化Swiper实例 -->
  <script>
    // 第一个轮播使用独立变量名
    var coverflowSwiper = new Swiper(".mySwiper", {
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      }, 
      autoplay: {
        delay: 1500,
      },
      loop: true // 开启循环保证自动播放流畅
    });

    // 第二个轮播使用独立变量名
    var fadeSwiper = new Swiper(".mySwiper1", {
      spaceBetween: 30,
      effect: "fade",
      autoplay: {
        delay: 1500,
      },
      loop: true,
    });
  </script>
</body>

后续扩展注意事项 #

如果后续需要给轮播添加分页器、前后切换按钮，不要给多个轮播共用Swiper默认的swiper-pagination、swiper-button-prev这类通用类名，要为每个轮播的控件设置独立类名，初始化时通过配置项指定对应控件的选择器，避免事件绑定冲突。

内容的提问来源于stack exchange，提问作者Yuval Marzan