更改 ng-bootstrap carousel 中的箭头颜色

Question

I'm creating carousel with ng-bootstrap, I want to change arrow colors or image from white to black cause i have white background images and they are invisible. My problem is that i can't get span, i don't know how to call this in scss. I'm using bootstrap 4 and ng-bootstrap for angular https://ng-bootstrap.github.io/#/components/carousel/examples . When i change image url in console it works. I was trying to get arrows directly but nothing happens.

My code:

<div class="col-lg-6">
      <div class="imageCarousel">
        <ng-container *ngIf="product.images">
          <ngb-carousel>
            <ng-template id="imageSlide" ngbSlide *ngFor="let image of product.images | slice: 1">
              <img [src]="image">

            </ng-template>

          </ngb-carousel>
        </ng-container>
      </div>
    </div>

scss:

.imageCarousel {
        max-height: 500px;
        text-align: center;
        color: $color2;
        .carousel .slide {
            width: 50px;
            height: 50px;
            background-image: url("https://storage.googleapis.com/staging.pc-shop-260af.appspot.com/ic_keyboard_arrow_right_black_24px.svg");
        }

        img {
            // border: 2px solid blue;
            max-width: 100%;
            max-height: 400px;
        }
    }

Answer 1

Yeap it's solved but you sometimes it's necessary to set the view encapsulation to None

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

Answer 2

ngb-carousel use SVG images as controls, you can override that with your own image of prev and next button:

.carousel-control-prev-icon{
   background-image: url('https://apufpel.com.br/assets/img/seta_prim.png')
}
.carousel-control-next-icon{
  background-image: url('https://apufpel.com.br/assets/img/seta_ult.png')
}

Answer 3

The answer given by Eduardo (above) only works if encapsulation is set to ViewEncapsulation.None which can have unintended side effects on other aspects of your CSS.

Instead the ::ng-deep pseudo-class can be used to target the specific CSS in question. In your scss file use the following:

::ng-deep .carousel-control-prev-icon{
  background-image: url('your-replacement.svg');
}
::ng-deep .carousel-control-next-icon{
  background-image: url('your-replacement.svg');
}

Answer 4

First I would suggest upgrading to ng-bootstrap v6+ which correctly makes the ngb component ViewEncapsulation as None so it can be set through global CSS or via unencapsulated component CSS. See ( https://github.com/ng-bootstrap/ng-bootstrap/issues/3479 ).

Second, override the SVG by simply setting it again & changing the fill property to whatever color you desire.

.carousel-control-next-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(50, 54, 57)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}

or alternatively you can invert the colors if you're just looking for more contrast:

.carousel-control-next-icon,
.carousel-control-prev-icon {
   filter: invert(1);
}

Setting encapsulation: ViewEncapsulation.None on your host component isn't a best practice. The smarter thing to do is to make these entry changes to your projects styles.scss (or whatever is specified in angular.json as the global styles file)

Answer 5

When inspecting that control on the link provided you can see your two buttons have classes attached to them.

Those arrows have a background-image attribute. Override that class for that attribute in your own css file.