如何调整Angular/ng-bootstrap Carousel导航箭头的位置

问题说明 #

已通过encapsulation: ViewEncapsulation.None修改了NgbCarousel导航箭头的颜色，但无法调整箭头位置至轮播外部（默认在内部）。尝试过隐藏默认按钮在外新建按钮组、在ng-template内添加按钮均无效，期望实现< | 轮播 | >的布局效果。

现有代码 #

模板代码 #

<!-- This card will contain a carosel / O meu card vai ter um carrocel. -->
<div class="card rounded-3 whyus-carrocel bg-transparent bg-dark-subtle d-flex align-items-center">

  <!-- The carosel itself / O carrocel em si. - Usa 100% da altura do card -->
  <!-- Hidden Classes: carousel, slide. -->
  <!--suppress AngularUndefinedBinding -->
  <ngb-carousel *ngIf="cards.length > 0" class="bg-white shadow" [showNavigationIndicators]="false">
    <!-- Layer/Camada 1: Role "Tablist". Classe: carousel-indicators. É o Navigation Indicators -->

    <!-- Layer/Camada 2: Wrapper for slides, carousel-inner. -->
    <ng-template ngbSlide *ngFor="let card of cards">
      <!--suppress AngularNgOptimizedImage -->
      <img [src]="card.caminhoImg" class="img-thumbnail card-img-top w-100" [alt]="card.textoAlternativo"
           height="400" width="600">
      <div class="card-body">
        <header class="card-title h5">{{ card.cardTitulo }}</header>
        <p class="card-text">{{ card.cardDescricao }}</p>
      </div>
    </ng-template>

    <!-- Layer/Camada 3: Buttons. Carousel-control-prev e next. -->

  </ngb-carousel>

</div>

CSS代码 #

/* Styles applied with the help of dev-tools - Use it */
.whyus-carrocel {
  height: 428px;
  width: 690px;
}

/* Here I am on carousel/Dentro do carrocel: Inside/Dentro de ngb-carousel do Angular. */
.whyus-carrocel .carousel {
  height: 100%;
  width: 18rem;
}

.carousel-control-next-icon {
  background-image: none;
  background-color: rgb(13, 110, 253);
  border-radius: 50%;
}

.carousel-control-prev-icon {
  background-image: none;
  background-color: rgb(13, 110, 253);
  border-radius: 50%;
}

TypeScript代码 #

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

@Component({
  selector: 'app-row-whyus',

  // To be able to change carosel style/Mudar estilo do carrocel.
  encapsulation: ViewEncapsulation.None,

// Etc
})
export class RowWhyusComponent {
  // 你的cards数据定义
  cards = [];
}

解决方案 #

步骤1：隐藏默认导航按钮 #

在CSS中添加样式，隐藏NgbCarousel自带的导航按钮：

.carousel-control-prev, .carousel-control-next {
  display: none;
}

步骤2：修改模板结构，添加自定义导航按钮 #

调整外层容器布局为横向flex，在轮播组件前后添加自定义按钮，并通过模板引用变量绑定轮播的切换方法：

<div class="card rounded-3 whyus-carrocel bg-transparent bg-dark-subtle d-flex flex-row align-items-center justify-content-center gap-3">
  <!-- 自定义上一页按钮 -->
  <button class="carousel-custom-btn btn btn-primary rounded-circle" (click)="carousel.prev()">
    <span>&lt;</span>
  </button>

  <ngb-carousel #carousel *ngIf="cards.length > 0" class="bg-white shadow" [showNavigationIndicators]="false">
    <!-- 轮播内容保持不变 -->
    <ng-template ngbSlide *ngFor="let card of cards">
      <img [src]="card.caminhoImg" class="img-thumbnail card-img-top w-100" [alt]="card.textoAlternativo"
           height="400" width="600">
      <div class="card-body">
        <header class="card-title h5">{{ card.cardTitulo }}</header>
        <p class="card-text">{{ card.cardDescricao }}</p>
      </div>
    </ng-template>
  </ngb-carousel>

  <!-- 自定义下一页按钮 -->
  <button class="carousel-custom-btn btn btn-primary rounded-circle" (click)="carousel.next()">
    <span>&gt;</span>
  </button>
</div>

步骤3：优化自定义按钮样式 #

添加CSS调整按钮的大小、对齐方式，确保和原箭头样式一致：

.carousel-custom-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding: 0;
}

原理说明 #

通过给ngb-carousel添加模板引用变量#carousel，可以直接调用组件内置的prev()和next()方法控制轮播切换。将自定义按钮放在轮播组件外部，脱离了轮播的内部布局限制，能自由调整位置，实现< | 轮播 | >的需求。

内容的提问来源于stack exchange，提问作者Raul Chiarella