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;
}

希望这会有所帮助！

Angular / ng-bootstrap-轮播箭头自定义

1 个答案: