Basic Example

Random first slide
Random second slide
Random third slide

Optional Captions

Random first slide

First slide label

Donut jujubes I love topping I love sweet. Jujubes I love brownie gummi bears I love donut sweet chocolate. Tart chocolate marshmallow.Tart carrot cake muffin.

Random second slide

Second slide label

Tart macaroon marzipan I love soufflé apple pie wafer. Chocolate bar jelly caramels jujubes chocolate cake gummies. Cupcake cake I love cake danish carrot cake

Random third slide

Third slide label

Pudding sweet pie gummies. Chocolate bar sweet tiramisu cheesecake chocolate cotton candy pastry muffin. Marshmallow cake powder icing.

Interval Option

Time in milliseconds before the next slide is shown. You can change the time of interval by adding [interval]='TimeMilliSeconds' directive to <ngb-carousel></ngb-carousel> component, where TimeMilliSeconds is set to milliseconds. By default, an interval is set to 5000 ie. 5sec.

Random first slide
Random second slide
Random third slide

Pause Option

If true, will pause slide switching when mouse cursor hovers the slide. By default is true. You can set it to false by adding [pauseOnHover]='false' directive to <ngb-carousel></ngb-carousel> component.

Random first slide
Random second slide
Random third slide

Wrap Option

If true, will 'wrap' the carousel by switching from the last slide back to the first. By default is true. You can set it to false by adding [wrap]='false' directive to <ngb-carousel></ngb-carousel> component.

Random first slide
Random second slide
Random third slide

Keyboard Option

If true, allows to interact with carousel using keyboard 'arrow left' and 'arrow right'. By default is true. You can set it to false by adding [keyboard]='false' directive to <ngb-carousel></ngb-carousel> component.

Random first slide
Random second slide
Random third slide

Navigation Arrow

If true, 'previous' and 'next' navigation arrows will be visible on the slide. By default is true. You can set it to false by adding [showNavigationArrows]='false' directive to <ngb-carousel></ngb-carousel> component.

Random first slide
Random second slide
Random third slide

Navigation Indicators

If true, navigation indicators at the bottom of the slide will be visible. By default is true. You can set it to false by adding [showNavigationIndicators]='false' directive to <ngb-carousel></ngb-carousel> component.

Random first slide
Random second slide
Random third slide

Crossfade

Add .carousel-fade to <ngb-carousel></ngb-carousel> component to animate slides with a fade transition instead of a slide.

Random first slide
Random second slide
Random third slide

Active Id

The slide id that should be displayed initially. By default initial slide is first slide. You can set initial slide by adding [activeId]="'idName'" directive to <ngb-carousel></ngb-carousel> component, and by adding unique [id]="'idName'" to individual ngbSlide directive.

Random first slide
Random second slide
Random third slide