ngb-Carousel隐藏了next和prev指标

时间:2017-11-02 16:02:51

标签: angular ng-bootstrap

我想隐藏下一个和上一个指标。 当我到达最后一张幻灯片时,我想隐藏下一个指标 当我在第一张幻灯片时想隐藏prev指标。 有没有办法实现这一目标。

    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

1 个答案:

答案 0 :(得分:2)

disable ViewEncapsulation之后,您可以将您的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;
}