Question

我的意图是将上一个和下一个图标放在轮播内容的正下方。
首先要编辑ng-bootstrap的css，我必须将封装设置为ViewEncapsulation.None（有更好的方法吗？）。即使这不是最好的方法，我也可以更改图标等。我试图通过使用边距来定位箭头，这使它们消失/连续变小。

有没有人遇到过同样的问题或总体上知道更好的方法？

如果您对stackblitz.com文件感兴趣（无法添加我当前的箭头自定义）： https://stackblitz.com/edit/angular-ng-bootstrap-demo-guejbq?embed=1&file=styles.css

在下面，我将向您说明我的代码：
HTML：


<div class="container-fluid">
  <div class="row">
    <div class="col-2 justify-content-center align-self-center p-0">
      <div class="progress rotate">
        <div class="progress-bar active progress-bar-custom" role="progressbar" [style.width.%]="currentPercentage" [attr.aria-valuenow]="currentPercentage" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>


    <div class="col-10">
      <ngb-carousel *ngIf="images" (slide)="changeProgress($event)">
        <ng-template ngbSlide>
          <img [src]="images[0]" alt="First slide" class="encImage">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[1]" alt="Second slide" class="encImage">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[2]" alt="Third slide" class="encImage">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[3]" alt="Fourth slide" class="encImage">
        </ng-template>
      </ngb-carousel>
    </div>
  </div>
</div>

CSS：

.encImage {
  max-width: 100%;
  height: auto;
}

.rotate {
  transform: rotate(270deg);
  background-color: #1F1F1F;
  height: 3px;
  width: 125%;
}

.progress-bar-custom {
  background-color: white;
}

.carousel-control-prev-icon {
  background-image: url('../../../assets/images/arrow.svg') !important;
  height: 40px;
  width: 40px;
}

.carousel-control-next-icon {
  background-image: url("../../../assets/images/arrow.svg") !important;
  height: 40px;
  width: 40px;
  transform: rotate(180deg);
}

TS：

import {Component, OnInit, ViewEncapsulation} from '@angular/core';

import {NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [NgbCarouselConfig]
})
export class CarouselComponent implements OnInit {

  public currentSlide: number;
  public currentPercentage: number = 25;

  images = ['assets/images/image1.jpeg', 'assets/images/image2.jpeg', 'assets/images/image3.jpeg', 'assets/images/image4.jpeg'];

  changeProgress(event: any): void {
    this.currentSlide = Number(event.current.substring(10));
    this.currentPercentage = (this.currentSlide + 1) / this.images.length * 100;
  }

  constructor(config: NgbCarouselConfig) {
    config.showNavigationIndicators = false;
  }

  ngOnInit() {
  }

}

使用ng-bootstrap和Angular定制轮播箭头

0 个答案: