从 ng carousal 顶部删除幻灯片编号文本

Question

我正在使用来自 ng-bootstrap 的这个 carousal :

<ngb-carousel [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <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>

并且它在图像顶部显示此文本，如:: slide 1 of 2 。

如何删除此文本并仅显示图像。在浏览器中检查时显示为这样::

<div role="tabpanel" class="carousel-item" id="slide-ngb-slide-1">
<span class="sr-only"> Slide 2 of 2 </span>                      // this one

Answer 1

这里是和平的源代码：

<span class="sr-only" i18n="Currently selected slide number read by screen reader@@ngb.carousel.slide-number">
  Slide {{i + 1}} of {{c}}
</span>

我看到隐藏此文本的 2 种可能性：

添加 CSS 隐藏 .carousel-inner .sr-only 隐藏此元素，例如

.carousel-inner .sr-only {
   display: none;
}

将翻译键值 ngb.carousel.slide-number 设置为空字符串。 Guidelines on internatiolization.

从 ng carousal 顶部删除幻灯片编号文本

Remove slide number text from top of ng carousal

css

angular-ui-bootstrap

ng-bootstrap