Search code examples
cssangular-ui-bootstrapng-bootstrap

Remove slide number text from top of ng carousal


I am using this carousal from 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>

And it shows this text on top of image like:: slide 1 of 2 .

How do I remove this text and only show image. It is showing up as this when inspected in browser::

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

Solution

  • Here is the source code of this peace:

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

    I see 2 possibilities to hide this text:

    1. add the CSS to hide .carousel-inner .sr-only to hide this element, eg
    .carousel-inner .sr-only {
       display: none;
    }
    
    1. set the value of the translation key ngb.carousel.slide-number to an empty string. Guidelines on internatiolization.