ng-hero-carousel

First Slide

1st slide subtitle

ng-template + slideForDirective

Here is an example of a button added as slide custom content

ng-template + #outerContent

You can also add custom content that remains visible across all slides (see doc)


    <ng-hero-carousel [slides]=slidesObject() 
>
  // You can add custom content for each slide this way
  <ng-template [slideFor]="0">
    <button>
        Button in first slide
    </button>
  </ng-template>

  // Also, You can add custom content that remains visible across all slides
  <ng-template #outerContent>
    <button style="position: absolute; top: 1rem; right: 1.5rem;">
        X
    </button>
  </ng-template>

</ng-hero-carousel>

hasOverlay

Add an overlay on top of the background image.

transitionTime

Time in ms of the transition between slides

arrowsPlacement

Position of arrows (Auto: up for desktop, down for mobile)

hasCounter

Add a counter (Ex: 1/5).

indicators

Select the type of indicator for the slides

hasAutoplay

Select whether you want autoplay or not

autoplayTime

Time in ms in which the slide is automatically changed

autoplayResumeTime

Time in ms to resume autoplay when it stops (e.g. clicking on a slide)

lang

Defines the language for built-in ARIA labels.

customAria

Provides custom ARIA labels to override default accessibility text.