Carousel Navigation

To add the navigation arrows on a carousel, use the component <carousel-nav> inside the <carousel> component

Example:

<carousel>
  <ng-template slideItem ngFor let-item [ngForOf]="items">
      ...
  </ng-template>

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

Navigation events

<carousel>
   ...
  <carousel-nav (prev)="onNavPrev()" (next)="onNavNext()"></carousel-nav>
</carousel>

Custom navigation icons

If you want to change the default navigation icons, all you have to do is to wrap your custom icon in an ng-template and put it inside <carousel-nav> component

Note use an icon that represents the next button and the carousel will automatically invert it and use it for the previous button.

Example:

<carousel>
  ...
  <carousel-nav>
    <ng-template>
       <mat-icon svgIcon="chevron_right"></mat-icon>
    </ng-template>
  </carousel-nav>
</carousel>

Related

• Carousel
• Carousel Dots