React中Swiper轮播如何将分页圆点移至滑块组件外部下方

问题根因 #

你的代码存在3处直接导致效果异常的问题：

• 类名拼写错误：自定义的.swiper-contrainer类名和Swiper默认容器类名不匹配（新版本Swiper正确容器类名为.swiper，旧版本为.swiper-container），导致设置的overflow: visible完全不生效，超出Swiper容器范围的内容会被默认的overflow: hidden裁切，分页点自然无法显示到容器外部
• 冗余嵌套错误：Swiper组件的直接子元素只能是SwiperSlide，你在SwiperSlide外层套了一层多余的div，会干扰Swiper内部布局、定位的计算逻辑
• 定位方式不合理：靠给.swiper-pagination硬写top:97%的方式偏移位置，本质还是把分页点放在Swiper内部容器里，就算取消溢出裁切，也容易出现定位偏移、被父容器遮挡的问题

修复步骤 #

1. 调整组件代码 #

把原来的pagination布尔配置替换为对象配置，指定分页点挂载到Swiper外部的自定义容器，同时删掉Swiper内部多余的嵌套div：

<Grid container style={{ marginBottom: 40 }}>
  <Swiper
    spaceBetween={50}
    modules={[Navigation, Pagination]}
    navigation
    pagination={{
      clickable: true,
      el: '.external-swiper-pagination',
    }}
    breakpoints={{
      640: { slidesPerView: 1 },
      1000: { slidesPerView: 2 },
      1300: { slidesPerView: 4 }
    }}
  >
    {sliders.map((news) => (
      <SwiperSlide key={news.codigo}>
        <Sliders info={news} />
      </SwiperSlide>
    ))}
  </Swiper>
  {/* 分页点容器放在Swiper外部，也就是滑块下方位置 */}
  <div 
    className="external-swiper-pagination" 
    style={{ width: '100%', marginTop: 16, textAlign: 'center' }}
  ></div>
</Grid>

2. 修正样式代码 #

删掉原来拼写错误的容器样式、硬写定位的分页样式，替换为以下代码：

.swiper-button-next,
.swiper-button-prev {
  background-color: rgba(255, 255, 255, 0.5);
  right: 0px;
  padding: 30px;
  color: rgb(0, 162, 255) !important;
  fill: rgb(0, 163, 255) !important;
  border-radius: 50% !important;
  border: solid rgb(255, 241, 241);
}

:root {
  --swiper-navigation-size: 26px;
}

/* 允许Swiper容器内容溢出，避免导航按钮、分页点被裁切 */
.swiper {
  overflow: visible;
}

/* 外部分页点样式 */
.external-swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #ccc;
  opacity: 1;
  margin: 0 6px;
}
.external-swiper-pagination .swiper-pagination-bullet-active {
  background: rgb(0, 162, 255);
}

如果你使用的是Swiper 7以下的旧版本，把样式里的.swiper替换为.swiper-container即可，其余逻辑完全通用。

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