Angular/ng-bootstrap - 旋转木马箭头自定义

Question

我正在尝试通过 bootstrap 更改给定控制箭头的位置和图标。我试图解决 "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')
 }

打字稿：

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

尝试使您的 CSS 包含重要内容，因为 NGB 轮播 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;
}

希望这会有所帮助！！

Angular/ng-bootstrap - 旋转木马箭头自定义

Angular/ng-bootstrap - Carousel Arrow Customization

html

css

typescript

ng-bootstrap

angular