如何在开启Center模式的Swiper中禁用分页圆点指示器

解决方案 #

你可以通过以下两种方式实现需求，两种方案都不会影响居中模式功能： #

方案1：CSS隐藏分页圆点（最稳妥，无需修改JS逻辑）

保留你现有Swiper的所有配置不变，只需要新增全局CSS样式即可：

.mySwiper .swiper-pagination {
  display: none !important;
}

这个方案直接隐藏渲染出来的分页节点，原有Swiper的所有功能逻辑都不会受影响，居中效果可以正常保留。 #

方案2：不渲染分页节点（优化DOM结构）

centeredSlides是Swiper核心模块自带的配置，本身不依赖Pagination模块。你之前禁用Pagination后居中失效大概率是模块导入错误或者样式冲突导致的，你可以直接删除pagination配置即可：
修改后的Swiper代码如下：

<Swiper
  slidesPerView={1.2}
  centeredSlides={true}
  spaceBetween={30}
  className="mySwiper"
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  <SwiperSlide>Slide 5</SwiperSlide>
  <SwiperSlide>Slide 6</SwiperSlide>
  <SwiperSlide>Slide 7</SwiperSlide>
  <SwiperSlide>Slide 8</SwiperSlide>
  <SwiperSlide>Slide 9</SwiperSlide>
</Swiper>

如果删除pagination配置后居中仍然失效，检查你的Swiper模块导入语句，确保没有漏导入核心功能，6.02版本默认全量导入的情况下不会出现这个问题。

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