ngb-Carousel 有条件地隐藏下一个和上一个指标

Question

我想隐藏下一个和上一个指标。当我到达最后一张幻灯片时，我想隐藏下一个指示器当我在第一张幻灯片上时，我想隐藏上一个指示器。有什么办法可以做到这一点。

    import {Component,ViewEncapsulation} from '@angular/core';
import {NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-carousel-basic',
  templateUrl: 'src/carousel-basic.html',
  styleUrls:['src/style.css']
  providers: [NgbCarouselConfig],
  encapsulation: ViewEncapsulation.None,
})
export class NgbdCarouselBasic {
  private data = ["Slide 1","Slide 2","Slide 3"]
  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.interval = 10000;
    config.wrap = false;
    config.keyboard = false;
  }
}

Example Plunker

Answer 1

在之后，您可以将 ng-carousel 放入 div

<div [ngClass]="{'first':myCarousel.activeId=='0','last':myCarousel.activeId==''+data.length-1}">

  <ngb-carousel ....>
    ....
  </ngb-carousel>
</div>

你的 .css 简直

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

ngb-Carousel 有条件地隐藏下一个和上一个指标

ngb-Carousel hide next and prev indicators conditonally

ng-bootstrap

angular