[Feature Request] Customize content of Carousel Indicators

[jspizziri]

It would be good to have the ability to customize the content of carousel indicators. An example use-case is if it's desired to put words indicating the slide. Theoretically this could be avoided by building a custom carousel indicators outside of NgbCarousel however that would depend on #1406, but even in that case it seems like a lot of overhead.

Thanks!

[tosrisri]

You can't style it by using CSS or SCSS. You can achieve it by modifying the template string, here's how:
Goto node_modules > @ng-boostrap > ng-bootstrap > carousel > carousel.js
give inline style to the

element like below:
...
template: "\n <ol class="carousel-indicators" *ngIf="showNavigationIndicators">\n <li style="background-color:black" *ngFor="let slide of slides" [id]="slide.id" [class.active]="slide.id === activeId"\n ...

You are done.

Here's the output

[tayambamwanza]

You can't style it by using CSS or SCSS. You can achieve it by modifying the template string, here's how:
Goto node_modules > @ng-boostrap > ng-bootstrap > carousel > carousel.js
give inline style to the

• element like below:
  ...
  template: "\n <ol class="carousel-indicators" *ngIf="showNavigationIndicators">\n <li style="background-color:black" *ngFor="let slide of slides" [id]="slide.id" [class.active]="slide.id === activeId"\n ...
  You are done.
  
  Here's the output
  

Hi, I'm attempting to change the color of the indicators. I saw you suggested editing the files in node_modules, would that not be wiped away anytime npm install is run though?