如何移除ng-bootstrap中ngb-carousel顶部的幻灯片序号提示文本

云原生阿岚

2026-10-14

ng-bootstrap轮播移除slide序号文本解决方案

默认情况下sr-only是无障碍辅助类，本身规则就是视觉上完全隐藏，仅对屏幕阅读器可见。如果你能看到"slide X of X"文本，通常是你的自定义样式覆盖了sr-only的默认隐藏规则，可通过以下方法解决：

方案1：精准隐藏该元素（最推荐）

先给ngb-carousel添加自定义类，避免样式污染其他组件：

<ngb-carousel 
  class="hide-slide-count"
  [showNavigationArrows]="showNavigationArrows" 
  [showNavigationIndicators]="showNavigationIndicators"
>
    <!-- 你的slide内容保持不变 -->
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img src="assets\fsfhjllz_vegetables-banner.png" class="mh-100" style="width: 100%; height: 30vh; object-fit:cover;">
      </div>
    </ng-template>
  
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img src="assets\vh9oeys6_fruit-banner.png" class="mh-100" style="width: 100%; height: 30vh; object-fit: cover;">
      </div>
    </ng-template>
</ngb-carousel>

如果是在使用轮播的组件对应的样式文件中添加规则，需要用::ng-deep穿透Angular的组件样式封装：

::ng-deep .hide-slide-count .carousel-item .sr-only {
  display: none !important;
}

如果是在全局样式文件styles.css中添加，可直接写：

.hide-slide-count .carousel-item .sr-only {
  display: none !important;
}

方案2：恢复sr-only默认样式（保留无障碍能力）

如果是全局样式错误覆盖了sr-only的默认规则，可在全局样式中添加以下代码恢复其原生逻辑，既不会视觉展示文本，也能保留屏幕阅读器的无障碍支持：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}