クラス IgxCarouselComponent

Ignite UI for Angular Carousel - ヘルプ

Ignite UI Carousel はスライド コレクションのブラウズやナビゲーションに使用されます。Slides can contain custom スライドは画像またはカードなどのカスタム コンテンツを含みます。チュートリアルまたはページに分割されるインターフェイスなどに使用できます。 別の全画面要素として使用、またはその他のコンポーネントに含むことができます。 例:

<igx-carousel>
<igx-slide>
<h3>First Slide Header</h3>
<p>First slide Content</p>
<igx-slide>
<igx-slide>
<h3>Second Slide Header</h3>
<p>Second Slide Content</p>
</igx-carousel>

階層

  • IgxCarouselComponentBase
    • IgxCarouselComponent

実装

  • OnDestroy
  • AfterContentInit

Index

コンストラクタ

  • new IgxCarouselComponent(cdr: ChangeDetectorRef, element: ElementRef<any>, iterableDiffers: IterableDiffers, builder: AnimationBuilder, platformUtil: PlatformUtil): IgxCarouselComponent

プロパティ

animationType: HorizontalAnimationType = HorizontalAnimationType.slide

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

<igx-carousel animationType='none'>
<igx-carousel>
次のメンバー:

IgxSlideComponent

cssClass: string = 'igx-carousel'

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

let class =  this.carousel.cssClass;
次のメンバー:

IgxCarouselComponent

gesturesSupport: boolean = true

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

<igx-carousel [gesturesSupport] = "false"></igx-carousel>
次のメンバー:

IgxCarouselComponent

id: string = ...

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

<igx-carousel id="my-first-carousel"></igx-carousel>
次のメンバー:

IgxCarouselComponent

indicatorTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.indicatorTemplate = myCustomTemplate;
<!-- 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>
indicatorsOrientation: CarouselIndicatorsOrientation = CarouselIndicatorsOrientation.bottom

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

<igx-carousel indicatorsOrientation='top'>
<igx-carousel>
次のメンバー:

IgxSlideComponent

keyboardSupport: boolean = true

カルーセルにキーボード ナビゲーショをサポートするかどうかを制御します。 デフォルト値は true です。

<igx-carousel [keyboardSupport] = "false"></igx-carousel>
次のメンバー:

IgxCarouselComponent

loop: boolean = true

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

<igx-carousel [loop]="false"></igx-carousel>
次のメンバー:

IgxCarouselComponent

maximumIndicatorsCount: number = 5

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

<igx-carousel [maximumIndicatorsCount] = "10"></igx-carousel>
次のメンバー:

IgxCarouselComponent

navigation: boolean = true

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

<igx-carousel [navigation] = "false"></igx-carousel>
次のメンバー:

IgxCarouselComponent

nextButtonTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.nextButtonTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-carousel #carousel>
...
<ng-template igxCarouselNextButton let-disabled>
<button igxButton="fab" igxRipple="white" [disabled]="disabled">
<igx-icon>add</igx-icon>
</button>
</ng-template>
</igx-carousel>
onCarouselPaused: EventEmitter<IgxCarouselComponent> = ...

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

<igx-carousel (onCarouselPaused)="onCarouselPaused($event)"></igx-carousel>
次のメンバー:

IgxCarouselComponent

onCarouselPlaying: EventEmitter<IgxCarouselComponent> = ...

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

<igx-carousel (onCarouselPlaying)="onCarouselPlaying($event)"></igx-carousel>
次のメンバー:

IgxCarouselComponent

onSlideAdded: EventEmitter<ISlideEventArgs> = ...

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

<igx-carousel (onSlideAdded)="onSlideAdded($event)"></igx-carousel>
次のメンバー:

IgxCarouselComponent

onSlideChanged: EventEmitter<ISlideEventArgs> = ...

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

<igx-carousel (onSlideChanged)="onSlideChanged($event)"></igx-carousel>
次のメンバー:

IgxCarouselComponent

onSlideRemoved: EventEmitter<ISlideEventArgs> = ...

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

<igx-carousel (onSlideRemoved)="onSlideRemoved($event)"></igx-carousel>
次のメンバー:

IgxCarouselComponent

pause: boolean = true

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

 <igx-carousel [pause]="false"></igx-carousel>
次のメンバー:

IgxCarouselComponent

prevButtonTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.carousel.nextButtonTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-carousel #carousel>
...
<ng-template igxCarouselPrevButton let-disabled>
<button igxButton="fab" igxRipple="white" [disabled]="disabled">
<igx-icon>remove</igx-icon>
</button>
</ng-template>
</igx-carousel>
role: string = 'region'

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

let carouselRole =  this.carousel.role;
次のメンバー:

IgxCarouselComponent

slides: QueryList<IgxSlideComponent>

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

let slides: QueryList<IgxSlideComponent> = this.carousel.slides;
次のメンバー:

IgxCarouselComponent

アクセサー

  • get current(): number
  • get interval(): number
  • set interval(value: number): void
  • get isDestroyed(): boolean
  • get isPlaying(): boolean
  • get nativeElement(): any
  • get total(): number
  • get touchAction(): "auto" | "pan-y"

メソッド

  • next(): void
  • play(): void
  • prev(): void
  • stop(): void