如何在启用Swup的情况下重启Swiper JS？

问题场景 #

• 已配置Swup实现无刷新页面切换：

var swup = new Swup({
  animationSelector: '[class*="swup-transition-"]'
});

• 主页Swiper滑块初始化代码：

import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11.1.1/swiper-bundle.min.mjs'
var swiper = new Swiper(".mySwiper", {
  autoplay: {
    delay: 5000,
  },
  loop: true,
  scrollbar: {
    el: ".swiper-scrollbar",  
    hide: true,
  },
});

• 异常表现：页面首次加载时滑块正常工作，通过Swup切换页面返回后，滑块完全失效、按钮无响应；尝试调用.updateProgress()、.updateSize()、.updateSlides()、.update()等Swiper API均无效果。

问题原因 #

Swup切换页面时会替换页面目标内容，但原有Swiper实例仍绑定在已被移除的旧DOM元素上，新加载的滑块DOM未被初始化，直接调用更新API无法作用于新元素。

解决方案 #

将Swiper初始化逻辑封装为函数，同时监听Swup的contentReplaced事件，在页面内容替换完成后重新初始化Swiper（先销毁旧实例避免冲突）：

import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11.1.1/swiper-bundle.min.mjs'

// 封装Swiper初始化函数
function initSwiper() {
  // 销毁已存在的实例，防止重复创建
  if (window.swiper) {
    window.swiper.destroy(true, true);
  }
  // 创建新的Swiper实例
  window.swiper = new Swiper(".mySwiper", {
    autoplay: {
      delay: 5000,
    },
    loop: true,
    scrollbar: {
      el: ".swiper-scrollbar",  
      hide: true,
    },
  });
}

// 页面首次加载时初始化
initSwiper();

// 监听Swup内容替换完成事件，重新初始化Swiper
document.addEventListener('swup:contentReplaced', initSwiper);

说明 #

• 把初始化逻辑抽成函数，既能在页面首次加载时执行，也能在页面切换后复用；
• 每次初始化前销毁旧实例，避免同一页面存在多个Swiper实例导致的冲突；
• 利用Swup的swup:contentReplaced事件确保只在页面内容完全替换后执行初始化，保证新DOM已加载完成。

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