Angular/ng-bootstrap - 旋轉木馬箭頭定制

Question

我正在嘗試通過引導程序更改給定控制箭頭的定位和圖標。 我試圖解決“carousel-control-prev-icon”和“carousel-control-next-icon”，但沒有任何變化。 有誰知道正確的解決方案？

HTML：

<div class="container">
  <div class="row">
    <div class="col-12">
      <ngb-carousel *ngIf="images">
        <ng-template ngbSlide>
          <img [src]="images[0]" alt="Random first slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[1]" alt="Random second slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[2]" alt="Random third slide">
        </ng-template>
      </ngb-carousel>
  </div>
  </div>
</div>

CSS：

ngb-carousel {
    width: 900px;
}

.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')
 }

TypeScript：

import { Component } from '@angular/core';

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

export class AppComponent {

  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

}

提前致謝，蒂姆

Answer 1

由於NGB輪播，請嘗試使您的CSS變得重要，因為CSS會覆蓋您包含在component.css文件中的CSS，如下所示

ngb-carousel {
  width: 900px;
}

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

希望這會有所幫助！

Answer 2

我正在使用 angular-13 和 bootstrap 5。要更改特定組件中的旋轉木馬箭頭，我必須添加 ::ng-deep 才能使其工作。

::ng-deep .carousel-control-prev-icon {
    background-image: url('https://apufpel.com.br/assets/img/seta_prim.png') !important;
}

::ng-deep .carousel-control-next-icon {
    background-image: url('https://apufpel.com.br/assets/img/seta_ult.png') !important;
}