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

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

0 голосов
/ 19 февраля 2019

Я пытаюсь изменить положение и значок данных управляющих стрелок при помощи начальной загрузки.Я пытался указать "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'];

}

Заранее спасибо,Тим

1 Ответ

0 голосов
/ 19 февраля 2019

Постарайтесь сделать ваш 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;
}

Надеюсь, это поможет !!

...