カルーセルのアニメーション タイプを取得または設定します。 デフォルト値は slide です。

<igx-carousel animationType="none">
<igx-carousel>
Copy

カルーセルが一時停止された後に発生するイベントです。 イベント引数として IgxCarouselComponent への参照を提供します。

<igx-carousel (carouselPaused)="carouselPaused($event)"></igx-carousel>
Copy

カルーセルが slides の間の移動を再開した後に発生するイベントです。 イベント引数として IgxCarouselComponent への参照を提供します。

<igx-carousel (carouselPlaying)="carouselPlaying($event)"></igx-carousel>
Copy

カルーセル コンポーネントのクラスを返します。

let class =  this.carousel.cssClass;
Copy

カルーセルにジェスチャをサポートするかどうかを制御します。 デフォルト値は true です。

<igx-carousel [gesturesSupport]="false"></igx-carousel>
Copy

カルーセルの id を設定します。設定されていない場合、最初のカルーセル コンポーネントの id は "igx-carousel-0" になります。

<igx-carousel id="my-first-carousel"></igx-carousel>
Copy

カルーセルがインジケーターを表示するかどうかを制御します。 デフォルト値は true です。

<igx-carousel [indicators]="false"></igx-carousel>
Copy

カルーセル インジケーターの表示モードを取得または設定します。start または end にすることができます。デフォルト値は end です。

<igx-carousel indicatorsOrientation="start">
<igx-carousel>
Copy

カルーセル インジケーターをレンダリングするときに使用するカスタム テンプレート。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.indicatorTemplate = myCustomTemplate;
Copy

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselIndicator let-slide>
        <igx-icon *ngIf="slide.active">brightness_7</igx-icon>
        <igx-icon *ngIf="!slide.active">brightness_5</igx-icon>
     </ng-template>
 </igx-carousel>
Copy

カルーセルが最後のスライドの後に最初のスライドに戻る (loop) かどうかを設定します。 デフォルト値は true です。

<igx-carousel [loop]="false"></igx-carousel>
Copy

表示できる最大インデックスを制御します。 デフォルト値は 10 です。

<igx-carousel [maximumIndicatorsCount]="5"></igx-carousel>
Copy

カルーセルに左/右のナビゲーション (navigation) ボタンをレンダリングするかどうかを制御します。 デフォルト値は true です。

<igx-carousel [navigation]="false"></igx-carousel>
Copy

カルーセル「次へ」ボタンをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.nextButtonTemplate = myCustomTemplate;
Copy

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselNextButton let-disabled>
         <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon name="add"></igx-icon>
         </button>
     </ng-template>
 </igx-carousel>
Copy

カルーセルがユーザー インタラクションでスライド トランジションを一時停止する (pause) かどうかを設定します。 デフォルト値は true です。

 <igx-carousel [pause]="false"></igx-carousel>
Copy

カルーセル「前へ」ボタンをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.prevButtonTemplate = myCustomTemplate;
Copy

<!-- Set in markup -->
 <igx-carousel #carousel>
     ...
     <ng-template igxCarouselPrevButton let-disabled>
         <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
             <igx-icon name="remove"></igx-icon>
         </button>
     </ng-template>
 </igx-carousel>
Copy

カルーセルの role 属性を返します。

let carouselRole =  this.carousel.role;
Copy

スライドがカルーセルに追加された後に発生するイベントです。 イベント引数として IgxCarouselComponent および IgxSlideComponent への参照を提供します。

<igx-carousel (slideAdded)="slideAdded($event)"></igx-carousel>
Copy

スライド トランジションが実行された後に発生するイベントです。 イベント引数として IgxCarouselComponent および IgxSlideComponent への参照を提供します。

<igx-carousel (slideChanged)="slideChanged($event)"></igx-carousel>
Copy

スライドがカルーセルから削除された後に発生するイベントです。 イベント引数として IgxCarouselComponent および IgxSlideComponent への参照を提供します。

<igx-carousel (slideRemoved)="slideRemoved($event)"></igx-carousel>
Copy

カルーセルにある slides のコレクションです。

let slides: QueryList<IgxSlideComponent> = this.carousel.slides;
Copy

カルーセルを垂直に配置するかどうかを制御します。 デフォルト値は false です。

<igx-carousel [vertical]="true"></igx-carousel>
Copy