swiper.js导航与分页组件位置异常问题（页面中部及底部）

问题根源 #

导航箭头（swiper-button-prev/next）和分页指示器（swiper-pagination）被放在了Swiper核心容器（.swiper）外部，导致它们无法继承Swiper容器的相对定位上下文，只能基于页面全局定位，从而出现位置偏移。

修复步骤 #

1. 调整HTML结构 #

将导航箭头和分页器元素移入Swiper容器内部，放在swiper-wrapper之后：

<section class="mex-card">
    <div class="swiper swiper-chocolate-qui-gon-jinn-749">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-slide-ff36">
            <div class="swiper-slide-content swiper-carousel-animate-opacity swiper-slide-content-dd9d">
              <div class="swiper-slide-text swiper-slide-text-c0a7">FREE</div>
              <div class="swiper-slide-text swiper-slide-text-906b">Free plan</div>
            </div>
          </div>
          <div class="swiper-slide swiper-slide-ff36">
            <div class="swiper-slide-content swiper-carousel-animate-opacity swiper-slide-content-dd9d">
              <div class="swiper-slide-text swiper-slide-text-f04a">$10</div>
              <div class="swiper-slide-text swiper-slide-text-e016">$10 plan</div>
            </div>
          </div>
          <div class="swiper-slide swiper-slide-ff36">
            <div class="swiper-slide-content swiper-carousel-animate-opacity swiper-slide-content-dd9d">
              <div class="swiper-slide-text swiper-slide-text-f04a">$20</div>
              <div class="swiper-slide-text swiper-slide-text-e016">$20 plan</div>
            </div>
          </div>
          <div class="swiper-slide swiper-slide-ff36">
            <div class="swiper-slide-content swiper-carousel-animate-opacity swiper-slide-content-dd9d">
              <div class="swiper-slide-text swiper-slide-text-f04a">$30</div>
              <div class="swiper-slide-text swiper-slide-text-e016">$30 plan</div>
            </div>
          </div>
          <div class="swiper-slide swiper-slide-ff36">
            <div class="swiper-slide-content swiper-carousel-animate-opacity swiper-slide-content-dd9d">
              <div class="swiper-slide-text swiper-slide-text-f04a">$30</div>
              <div class="swiper-slide-text swiper-slide-text-e016">$30 plan</div>
            </div>
          </div>
        </div>
        <!-- 导航与分页器移至容器内部 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
    </div>
</section>

2. 完善Swiper初始化配置 #

确保初始化时正确指定导航和分页器的选择器，启用对应模块：

const swiper = new Swiper('.swiper-chocolate-qui-gon-jinn-749', {
  // 配置分页器
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  // 配置导航箭头
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
});

3. 补充CSS定位规则 #

给Swiper容器添加相对定位，确保内部元素的绝对定位基于容器：

.swiper-chocolate-qui-gon-jinn-749 {
  user-select: none;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: auto;
  padding: 20px 0px;
  position: relative; /* 新增：添加相对定位上下文 */
}

/* 可选：调整导航箭头位置，避免被滑块内容遮挡 */
.swiper-button-prev, .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

验证效果 #

修改后，导航箭头会基于Swiper容器垂直居中，分页器会显示在容器底部（可通过--swiper-pagination-bottomCSS变量调整与底部的距离），完全贴合滑块区域。

内容的提问来源于stack exchange，提问作者mister-m