CODEWITHSUNDEEP
angularng-bootstrap
Naresh217
Naresh217

Reputation: 420

ngb-Carousel hide next and prev indicators conditonally

I would like to hide next and prev indicators. When i reach last slide i would like to hide next indicator and when i am on first slide would like to hide prev indicator. is there a way we can achieve this. 

    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

Upvotes: 3

Views: 4044

Answers (1)

Eliseo
Eliseo

Reputation: 58019

After disable ViewEncapsulation you can put your ng-carousel into a div

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

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

Your .css simply

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

Upvotes: 6

Related Questions