Basic Carousel

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Basic Code :


  import {Component} from '@angular/core';
  @Component({
    selector: 'ngbd-carousel-basic',
    templateUrl: './carousel-basic.html'
  })
  export class NgbdCarouselBasic {
  }

Global configuration of carousels

10 seconds between slides...

This carousel uses customized default values.

No keyboard...

This carousel uses customized default values.

And no wrap after last slide.

This carousel uses customized default values.

Configuration Code :


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

  @Component({
    selector: 'ngbd-carousel-config',
    templateUrl: './carousel-config.html',
    providers: [NgbCarouselConfig] // add NgbCarouselConfig to the component providers
  })
  export class NgbdCarouselConfig {
    constructor(config: NgbCarouselConfig) {
      
      config.interval = 10000;
      config.wrap = false;
      config.keyboard = false;
    }
  }