React中如何隐藏Swiper指定幻灯片的分页器

完全可以通过JS实现该需求，推荐优先使用Swiper官方提供的自定义分页器能力实现，也可以通过DOM操作实现，两种方案如下：

方案1：自定义分页器渲染（最推荐） #

直接通过Swiper分页器配置的renderBullet属性自定义渲染逻辑，匹配到第1、第10张幻灯片对应索引时直接返回空，不生成对应的分页器节点，不会出现节点闪显的问题。
示例代码：

import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';

function SlideComponent() {
  return (
    <Swiper
      modules={[Pagination]}
      slidesPerView={1}
      pagination={{
        clickable: true,
        // 自定义子弹分页器渲染逻辑
        renderBullet: (index, className) => {
          // 幻灯片索引从0开始计数，第1张对应index=0，第10张对应index=9
          if (index === 0 || index === 9) return '';
          return `<span class="${className}"></span>`;
        }
      }}
    >
      <SwiperSlide>第1张幻灯片</SwiperSlide>
      <SwiperSlide>第2张幻灯片</SwiperSlide>
      <SwiperSlide>第3张幻灯片</SwiperSlide>
      <SwiperSlide>第4张幻灯片</SwiperSlide>
      <SwiperSlide>第5张幻灯片</SwiperSlide>
      <SwiperSlide>第6张幻灯片</SwiperSlide>
      <SwiperSlide>第7张幻灯片</SwiperSlide>
      <SwiperSlide>第8张幻灯片</SwiperSlide>
      <SwiperSlide>第9张幻灯片</SwiperSlide>
      <SwiperSlide>第10张幻灯片</SwiperSlide>
    </Swiper>
  )
}

方案2：渲染后操作DOM隐藏 #

如果不想修改默认分页器渲染逻辑，也可以在Swiper实例初始化完成后，获取所有分页器节点，隐藏指定索引的节点即可。
示例代码：

<Swiper
  modules={[Pagination]}
  slidesPerView={1}
  pagination={{ clickable: true }}
  // 拿到Swiper实例后操作分页器节点
  onSwiper={(swiper) => {
    // 加延时确保分页器已经渲染到DOM中
    setTimeout(() => {
      const allBullets = swiper.pagination.bullets;
      if (allBullets?.length >= 10) {
        // 隐藏第1、第10张对应的分页器
        allBullets[0].style.display = 'none';
        allBullets[9].style.display = 'none';
      }
    }, 0)
  }}
>
  {/* 10张幻灯片内容 */}
</Swiper>

注意事项 #

• 如果后续调整幻灯片总数量，需要对应修改判断的索引值，避免误隐藏其他分页器
• 如果隐藏分页器的同时需要禁止用户滑动到第1、第10张幻灯片，可以配合Swiper的initialSlide、allowSlideNext、allowSlidePrev属性调整滑动逻辑

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