Bootstrap Swiper最后一个元素innerHTML更新后不显示求助

问题原因 #

Swiper默认的预加载/缓存机制会提前处理相邻slide的DOM状态，当你直接修改slide内元素的innerHTML后，Swiper没有感知到DOM变化，导致切换到最后一个slide时仍加载旧的缓存内容；而从后往前切换时，Swiper会重新渲染当前slide，所以内容正常显示。

解决方案 #

方法1：更新内容后调用Swiper实例的update()方法（推荐）

先确保你在初始化Swiper时保存了实例对象，修改DOM内容后调用update()通知Swiper重新计算slide的尺寸和内容：

// 初始化Swiper并保存实例
const mySwiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // 你的其他配置项
});

// 更新slide内容
document.querySelector('#info_banner_merch').innerHTML = lang.info_banner_merch;
document.querySelector('#info_banner_website').innerHTML = lang.info_banner_website;
document.querySelector('#info_banner_team').innerHTML = lang.info_banner_team;

// 关键：通知Swiper更新DOM状态
mySwiper.update();

方法2：禁用Swiper的预加载缓存（备选，不推荐）

通过关闭Swiper的预加载相关配置，强制每次切换都渲染最新DOM，但会牺牲部分滑动性能：

const mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  preloadImages: false,
  watchSlidesProgress: false,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

方法3：监听slide切换事件，按需更新内容（兜底方案）

如果上述方法无效，可监听slideChange事件，当切换到最后一个slide时重新赋值：

mySwiper.on('slideChange', function() {
  // 最后一个slide的索引为2（从0开始计数）
  if (this.activeIndex === 2) {
    document.querySelector('#info_banner_team').innerHTML = lang.info_banner_team;
  }
});

内容的提问来源于stack exchange，提问作者Dev-91823