как отодвинуть стрелки ngbCarousel от изображений

Я работаю над начальной загрузкой ngbCarousel и хочу знать, как перемещать стрелки в нем от изображений или за их пределы. Я пытался сделать это через css, но у меня не получается. Кроме того, я хочу изменить цвет стрелок, так как мои изображения имеют белый фон. Пробовал так сделать, в инспекте работает, но когда копирую css в свой файл component.css, не влияет.

.carousel-control-prev-icon, .carousel-control-next-icon {
    display: inline-block;
    width: 16px;
    height: 21px;
    background: no-repeat 50% / 100% 100%;
    background-color: black;
    margin-left: -102px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50% / 100% 100%;
    background-color: black;
}


.carousel-controls {display: -ms-flexbox;display: flex;-ms-flex-pack: justify;justify-content: space-between;position: absolute;width: 100%;top: 43%;}

.carousel-controls a {

background-color: rgba(255, 255, 255, 0.6);

color: #000;

padding: 10px 14px;

font-size: 30px;

}

.carousel-controls a:hover {

background-color: rgba(255, 255, 255, 0.9);

}

компонент.html

<div class = "row">
  <div class = "col-md-2">

  </div>
  <div class = "  col-md-8">
  <ngb-carousel  [showNavigationIndicators]="showNavigationIndicators"  >
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img src="../../../assets/images/ECollections.png" width="300px" height = "300px" class="img-responsive" style="float:left;margin-left: 10px">
      </div>

      <div class="picsum-img-wrapper">
        <img src="../../../assets/images/iSurePay.jpg"  width="300px" height = "300px" class="img-responsive" style="float:left; margin-left:50px">
       </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img src="../../../assets/isurePay/isurePay-seqdiagram-1.jpg" width="400px" height = "400px" class="img-responsive" style="float:left">
      </div>

      <div class="picsum-img-wrapper">
        <img src="../../../assets/E-collection/Ecollection-Seqdiagrams-1.jpg"  width="400px" height = "400px" class="img-responsive" style="float:left; margin-left:30px">
       </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img src="../../../assets/E-collection/Ecollection-Seqdiagrams-3.jpg" width="400px" height = "400px" class="img-responsive" style="float:left">
      </div>

      <div class="picsum-img-wrapper">
        <img src="../../../assets/isurePay/isurePay-seqdiagram-3.jpg"  width="400px" height = "400px" class="img-responsive" style="float:left; margin-left:30px">
       </div>
    </ng-template>
  </ngb-carousel>

</div>
</div>

angular carousel bootstrap-4 ng-bootstrap
person Techdive    schedule 09.10.2019    source источник
comment
если вы хотите изменить css, вам нужно использовать encapsulation:ViewEncapsulation.None. Если вы хотите, вы можете создать свои кнопки и использовать showNavigationArrows=false, см. API ng-bootstrap.github.io/#/components/carousel/api. ПРИМЕЧАНИЕ. Если вы хотите анимировать, stackoverflow.com/questions/57131765/   -  person Eliseo    schedule 09.10.2019
comment
@Techdive Попробуйте добавить свой css в свой style.css, css, который вы добавили во время проверки. Должен работать на вас   -  person 77792    schedule 09.10.2019
comment
Спасибо @Eliseo и 77792   -  person Techdive    schedule 09.10.2019