Carousel

Directive to easily create carousels based on Bootstrap's markup.

Basic Carousel

Random first slide

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

 Random second slide

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 Random third slide

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Global configuration of carousels

Random first slide

10 seconds between slides...

This carousel uses customized default values.

 Random second slide

No keyboard...

This carousel uses customized default values.

 Random third slide

And no wrap after last slide.

This carousel uses customized default values.

Basic Code

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

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;
      config.pauseOnHover = false;
    }
  }