CODEWITHSUNDEEP
cssangular-ui-bootstrapng-bootstrap
sapter
sapter

Reputation: 344

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

Upvotes: 3

Views: 2005

Answers (3)

Poo
Poo

Reputation: 1

Using ViewEncapsulation, this can be achieved. Add the below style to component.css file

.visually-hidden {
    display: none;
 }

or

 .carousel-inner span {
    display: none;
 }

Also add, encapsulation: ViewEncapsulation.None in @Component decorator in component.ts file

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  encapsulation: ViewEncapsulation.None
})

Upvotes: 0

gerstams
gerstams

Reputation: 445

With ngbootstrap 15.1 and bootstrap 5, the <span> that shows the slide information, e.g. "Slide 2 of 2", now carries the css class visually-hidden.

If you are using Bootstrap with SCSS and did not import the whole of bootstrap via @import "/bootstrap/scss/bootstrap";, but instead import only what you need, then you will find the css class inside helpers/_visually-hidden: @import "bootstrap/scss/helpers/_visually-hidden";

Bootstrap documentation: https://getbootstrap.com/docs/5.0/helpers/visually-hidden/

Upvotes: 0

IAfanasov
IAfanasov

Reputation: 4993

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.

Upvotes: 0

Related Questions