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

Question

我正在使用 ng-bootstrap 的轮播：

<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>

它会在图像顶部显示此文本，例如：幻灯片 1（共 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>

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

1. 添加 CSS to hide

   .carousel-inner .sr-only

   来隐藏该元素，例如

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

2. 将翻译键

   ngb.carousel.slide-number

   的值设置为空字符串。 国际化指南。

Answer 2

对于 ngbootstrap 15.1 和 bootstrap 5，显示幻灯片信息的

<span>

，例如“幻灯片 2 of 2”，现在带有 css 类

visually-hidden

。

如果您将 Bootstrap 与 SCSS 一起使用，并且没有通过

@import "/bootstrap/scss/bootstrap";

导入整个 Bootstrap，而是仅导入您需要的内容，那么您将在

helpers/_visually-hidden

中找到 css 类：

@import "bootstrap/scss/helpers/_visually-hidden";

Bootstrap 文档：https://getbootstrap.com/docs/5.0/helpers/visually-hidden/