SwiperJS(React)：实现3点分页及修复边界点异常问题

问题原因 #

你之前用CSS直接隐藏swiper-pagination-bullet-active-prev-prev和swiper-pagination-bullet-active-next-next的方式，会干扰Swiper在边界slide（第一个/最后一个）时的动态分页逻辑——当处于边界时，这些"额外"的分页点本身就不会被Swiper渲染，强行隐藏的样式会打乱默认显示规则，导致异常消失的情况。

修复方案 #

方案1：精准CSS控制（保留默认动态行为） #

通过更精准的选择器，只在非边界场景下隐藏多余分页点，同时兼容Swiper的边界逻辑：

/* 仅当激活点不是前2个时，隐藏激活点的前第二个分页点 */
.swiper-pagination-bullet-active:nth-child(n+3) ~ .swiper-pagination-bullet-active-prev-prev {
  visibility: hidden;
}

/* 仅当激活点不是后2个时，隐藏激活点的后第二个分页点 */
.swiper-pagination-bullet-active:nth-last-child(n+3) ~ .swiper-pagination-bullet-active-next-next {
  visibility: hidden;
}

这个方案会自动适配边界情况：第一个slide时，只显示当前激活点和后一个点；最后一个slide时，只显示前一个点和当前激活点；中间slide则保持1激活+1前+1后的3个点显示，完全保留dynamicBullets的原生动画。

方案2：自定义分页渲染（更灵活可控） #

如果需要完全自定义显示逻辑，可以通过Swiper的renderBullet配置函数，直接控制每个分页点的渲染：

const swiper = new Swiper('.swiper', {
  // 基础配置示例
  slidesPerView: 1,
  pagination: {
    el: '.swiper-pagination',
    dynamicBullets: true, // 保留动态子弹点的缩放动画
    renderBullet: function(index, className) {
      // 只渲染当前激活点±1范围内的分页点，其他点隐藏
      const activeIndex = this.activeIndex;
      if (Math.abs(index - activeIndex) <= 1) {
        return `<span class="${className}"></span>`;
      }
      return `<span class="${className}" style="visibility: hidden;"></span>`;
    }
  }
});

每次slide切换时，函数会重新计算并渲染需要显示的分页点，完全符合3个点的需求，同时保留原生动态效果。

优先推荐 #

方案1更轻量，不需要修改JS逻辑，仅通过CSS就能实现需求，完美保留Swiper默认的动态分页行为。

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