カルーセルのアニメーション タイプを取得または設定します。
デフォルト値は slide です。
<igx-carousel animationType='none'>
<igx-carousel>
IgxSlideComponent
カルーセルが一時停止された後に発生するイベントです。
イベント引数として IgxCarouselComponent への参照を提供します。
<igx-carousel (carouselPaused)="carouselPaused($event)"></igx-carousel>
IgxCarouselComponent
カルーセルが slides の間の移動を再開した後に発生するイベントです。
イベント引数として IgxCarouselComponent への参照を提供します。
<igx-carousel (carouselPlaying)="carouselPlaying($event)"></igx-carousel>
IgxCarouselComponent
カルーセル コンポーネントのクラスを返します。
let class = this.carousel.cssClass;
IgxCarouselComponent
カルーセルにジェスチャをサポートするかどうかを制御します。
デフォルト値は true です。
<igx-carousel [gesturesSupport]="false"></igx-carousel>
IgxCarouselComponent
カルーセルの id を設定します。設定されていない場合、最初のカルーセル コンポーネントの
id は "igx-carousel-0" になります。
<igx-carousel id="my-first-carousel"></igx-carousel>
IgxCarouselComponent
カルーセル インジケーターを描画するときに使用するカスタム テンプレートです。
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.indicatorTemplate = myCustomTemplate;
<!-- 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>
カルーセル インジケーターの表示モードを取得または設定します。top
または bottom にすることができます。デフォルト値は bottom です。
<igx-carousel indicatorsOrientation='top'>
<igx-carousel>
IgxSlideComponent
カルーセルにキーボード ナビゲーショをサポートするかどうかを制御します。
デフォルト値は true です。
<igx-carousel [keyboardSupport]="false"></igx-carousel>
IgxCarouselComponent
カルーセルが最後のスライドの後に最初のスライドに戻る (loop) かどうかを設定します。
デフォルト値は true です。
<igx-carousel [loop]="false"></igx-carousel>
IgxCarouselComponent
表示できる最大インデックスを制御します。
デフォルト値は 5 です。
<igx-carousel [maximumIndicatorsCount]="10"></igx-carousel>
IgxCarouselComponent
カルーセルに左/右のナビゲーション (navigation) ボタンを描画するかどうかを制御します。
デフォルト値は true です。
<igx-carousel [navigation]="false"></igx-carousel>
IgxCarouselComponent
カルーセル「次へ」ボタンを描画するときに使用する必要があるカスタムテンプレート (存在する場合)。
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.nextButtonTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-carousel #carousel>
...
<ng-template igxCarouselNextButton let-disabled>
<button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
<igx-icon>add</igx-icon>
</button>
</ng-template>
</igx-carousel>
カルーセルがユーザー インタラクションでスライド トランジションを一時停止する (pause) かどうかを設定します。
デフォルト値は true です。
<igx-carousel [pause]="false"></igx-carousel>
IgxCarouselComponent
カルーセル「前へ」ボタンを描画するときに使用する必要があるカスタムテンプレート (存在する場合)。
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.nextButtonTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-carousel #carousel>
...
<ng-template igxCarouselPrevButton let-disabled>
<button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
<igx-icon>remove</igx-icon>
</button>
</ng-template>
</igx-carousel>
カルーセルの role 属性を返します。
let carouselRole = this.carousel.role;
IgxCarouselComponent
スライドがカルーセルに追加された後に発生するイベントです。
イベント引数として IgxCarouselComponent および IgxSlideComponent への参照を提供します。
<igx-carousel (slideAdded)="slideAdded($event)"></igx-carousel>
IgxCarouselComponent
スライド トランジションが実行された後に発生するイベントです。
イベント引数として IgxCarouselComponent および IgxSlideComponent への参照を提供します。
<igx-carousel (slideChanged)="slideChanged($event)"></igx-carousel>
IgxCarouselComponent
スライドがカルーセルから削除された後に発生するイベントです。
イベント引数として IgxCarouselComponent および IgxSlideComponent への参照を提供します。
<igx-carousel (slideRemoved)="slideRemoved($event)"></igx-carousel>
IgxCarouselComponent
カルーセルにある slides のコレクションです。
let slides: QueryList<IgxSlideComponent> = this.carousel.slides;
IgxCarouselComponent
表示しているスライドのインデックスです。
let currentSlideNumber = this.carousel.current;
IgxCarouselComponent
スライドが変わる前の間隔 (interval) をミリ秒で返します。
let timeInterval = this.carousel.interval;
IgxCarouselComponent
スライドが変わる前の間隔 (interval) をミリ秒で設定します。設定されない場合、カルーセルは
slides を自動的に変更しません。
<igx-carousel [interval]="1000"></igx-carousel>
IgxCarouselComponent
カルーセルが破棄されたかどうかを示すブール値を返します。
let isDestroyed = this.carousel.isDestroyed;
IgxCarouselComponent
カルーセルが再生しているかどうかを示すブール値を返します。
let isPlaying = this.carousel.isPlaying;
IgxCarouselComponent
DOM でカルーセル要素への参照を返します。
let nativeElement = this.carousel.nativeElement;
IgxCarouselComponent
リソース文字列を返すアクセサーです。
リソース文字列を設定するアクセサーです。 デフォルトで EN リソースを使用します。
カルーセルで slides の総数を返します。
let slideCount = this.carousel.total;
IgxCarouselComponent
list item の touch-action スタイルを取得します。
let touchAction = this.listItem.touchAction;
カルーセルに新しいスライドを追加します。
this.carousel.add(newSlide);
IgxCarouselComponent
既定の index に対応するスライドまたは null を返します。
let slide1 = this.carousel.get(1);
IgxCarouselComponent
スライドをカルーセルから削除します。
this.carousel.remove(slide);
IgxCarouselComponent
指定した direction に移動する指定したスライドのトランジションを実行します。
this.carousel.select(this.carousel.get(2), Direction.NEXT);
IgxCarouselComponent
Ignite UI for Angular Carousel - ヘルプ
Ignite UI Carousel はスライド コレクションのブラウズやナビゲーションに使用されます。 スライドは画像またはカードなどのカスタム コンテンツを含みます。チュートリアルまたはページに分割されるインターフェイスなどに使用できます。 別の全画面要素として使用、またはその他のコンポーネントに含むことができます。
例: