如何使用Swiper实现固定背景下的文本滑动效果？

核心原因是你当前把背景图绑定在了会随Swiper滑动的节点（swiper容器、wrapper、slide）上，滑动时节点平移带动背景同步移动，只要把背景和Swiper滑动层分层处理即可，具体实现步骤如下：

1. 调整DOM结构 #

将背景容器和Swiper容器拆分为两个独立的平级节点，放在同一个外层父容器下，Swiper内部仅保留需要滑动的文本内容：

<!-- 外层父容器，控制整体广告尺寸 -->
<div class="ad-wrapper">
  <!-- 独立背景层，不参与滑动逻辑 -->
  <div class="ad-background"></div>
  <!-- Swiper滑动层，仅包含文本内容 -->
  <div class="swiper text-swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p>第一段广告文案</p>
      </div>
      <div class="swiper-slide">
        <p>第二段广告文案</p>
      </div>
      <div class="swiper-slide">
        <p>第三段广告文案</p>
      </div>
    </div>
  </div>
</div>

2. 编写对应样式 #

核心是让背景层固定占满父容器，层级低于Swiper滑动层，所有Swiper相关节点背景设为透明：

.ad-wrapper {
  position: relative;
  width: 100%;
  height: 100vh; /* 可根据广告实际尺寸调整 */
  overflow: hidden;
}
.ad-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 替换为你的背景图地址 */
  background: url("背景图资源地址") no-repeat center/cover;
  z-index: 1;
}
.text-swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: transparent;
}
.swiper-slide {
  background: transparent;
  /* 自定义文本布局，可根据需求调整 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-slide p {
  font-size: 26px;
  color: #fff;
  font-weight: bold;
}

3. 初始化Swiper #

不需要修改特殊配置，按你原有业务逻辑正常初始化即可：

const swiper = new Swiper('.text-swiper', {
  direction: 'horizontal', // 横向滑动用horizontal，纵向滑动修改为vertical
  loop: false, // 按需开启循环
  // 其他你需要的配置项：自动切换、分页器等都可以正常加
});

注意事项 #

• 不要把背景图绑定在.swiper、.swiper-wrapper、.swiper-slide这三类可滑动节点上，否则滑动时必然带动背景移动
• 如果用到Swiper的切换动效（比如淡入淡出、3D翻转等），只要不修改滑动节点的背景属性，就不会影响背景固定的效果
• 多端适配只需要调整外层.ad-wrapper和.ad-background的尺寸规则即可，不需要改动Swiper相关逻辑

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