Angular/ng-bootstrap - Карусель Arrow Настройка

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

Машинопись:

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 важным, так как CSS-карусель NGB переопределяет этот CSS, который вы включаете в файл component.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;
}