Skip to content

Carousel

Murhaf Sousli edited this page Oct 16, 2018 · 6 revisions

Each carousel item is wrapped inside <ng-template slideItem>

<carousel>

  <ng-template slideItem>
      Item 1
  </ng-template>

  <ng-template slideItem>
       Item 2
  </ng-template>

  <ng-template slideItem>
       Item 3
  </ng-template>

</carousel>

Use ngFor to loop over an array of items

<carousel>

  <ng-container *ngFor="let item of items">
    <ng-template slideItem>
       ...
    </ng-template>
  </ng-container>

</carousel>

Add carousel dots and navigation components

<carousel>

  <ng-container *ngFor="let item of items">
    <ng-template slideItem>
       ...
    </ng-template>
  </ng-container>

  <carousel-dots></carousel-dots>
  <carousel-nav></carousel-nav>
</carousel>

Related