igniteui-angular-sovn/src/lib/carousel/carousel.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<ng-template #defaultIndicator let-slide>
    <div class="igx-nav-dot"
        [class.igx-nav-dot--active]="slide.active">
    </div>
</ng-template>

<ng-template #defaultNextButton let-disabled>
    <span class="igx-nav-arrow"
          [class.igx-nav-arrow--disabled]="disabled">
        <igx-icon>arrow_forward</igx-icon>
    </span>
</ng-template>

<ng-template #defaultPrevButton let-disabled>
    <span class="igx-nav-arrow"
          [class.igx-nav-arrow--disabled]="disabled">
        <igx-icon>arrow_back</igx-icon>
    </span>
</ng-template>

<div *ngIf="showIndicators" [ngClass]="indicatorsOrientationClass" [attr.role]="'tablist'">
    <div *ngFor="let slide of slides"
        class="igx-carousel-indicators__indicator"
        (click)="select(slide)"
        [id]="'tab-'+ slide.index + '-' + total"
        [attr.role]="'tab'"
        [attr.aria-label]="resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total"
        [attr.aria-controls]="'panel-' + slide.index"
        [attr.aria-selected]="slide.active">
        <ng-container *ngTemplateOutlet="getIndicatorTemplate; context: {$implicit: slide};"></ng-container>
    </div>
</div>

<div *ngIf="showIndicatorsLabel" [ngClass]="indicatorsOrientationClass">
    <span [id]="labelId" class="igx-carousel__label">{{getCarouselLabel}}</span>
</div>

<div class="igx-carousel__inner" [attr.aria-live]="!interval || stoppedByInteraction ? 'polite' : 'off'">
    <ng-content></ng-content>
</div>

<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--prev" [attr.aria-label]="resourceStrings.igx_carousel_previous_slide" (keydown.enter)="prev()" (click)="prev()">
    <ng-container *ngTemplateOutlet="getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};"></ng-container>
</div>

<div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--next" [attr.aria-label]="resourceStrings.igx_carousel_next_slide" (keydown.enter)="next()" (click)="next()">
    <ng-container *ngTemplateOutlet="getNextButtonTemplate; context: {$implicit: nextButtonDisabled};"></ng-container>
</div>