如何更改 ng bootstrap carousel 箭头的颜色

Question

I'm trying to change the color of the arrows - but nothing works (tried setting it as an image too).

what I tried:

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

I also tried setting encapsulation: ViewEncapsulation.None, which does works but messes up ALL the css on my page so I would prefer not to do that. Any ideas?

HTML:

<ngb-carousel *ngIf="images">
  <ng-template ngbSlide *ngFor="let image of images">
    <div class="picsum-img-wrapper">
      <img [src]="image" alt="Random slide">
    </div>
  </ng-template>
</ngb-carousel>

css:

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

})
export class SlideshowComponent {

  showNavigationArrows = true;
  showNavigationIndicators = false;
  images = ['../../assets/img/3.jpeg',
  '../../assets/img/4.jpeg',
  '../../assets/img/5.jpeg',
  '../../assets/img/6.jpeg',
  '../../assets/img/9.jpeg',
  '../../assets/img/44.jpeg',
  '../../assets/img/55.jpeg',
  '../../assets/img/66.png',
  '../../assets/img/77.jpeg',
  '../../assets/img/88.jpeg',
  '../../assets/img/100.jpeg',
  '../../assets/img/3333.jpeg',
  '../../assets/img/5555.jpeg',
  '../../assets/img/2222.jpeg',
  '../../assets/img/777.jpeg',
  '../../assets/img/1111.jpeg',
  '../../assets/img/222.jpeg']


  constructor(config: NgbCarouselConfig) {
    config.showNavigationArrows = true;
    config.showNavigationIndicators = false;
  }
}

Answer 1

Modify the CSS should work well, why your CSS override seems not working because the color you filled is still the white color, you can try to change it to fill='%23f00' (the red color).

Check the demo on stackblitz with red arrow: https://stackblitz.com/edit/angular-xcv6dg-jbeztk?file=styles.css

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}