Carousel

Ignite UI for Angular Carousel コンポーネントは、ネイティブ Angular コンポーネントです。画像ギャラリー、カード、チュートリアル、またはページごとのインターフェイスでスライドコレクションをブラウズ、移動できます。

Angular Carousel の例

使用方法

Carousel を全画面要素またはコンポーネントの子に設定できます。また、スライドに有効な HTML コンテンツ、その他の Angular コンポーネントなども含めることができます。

はじめに

Note

このコンポーネントでは、タッチ操作が正しく動作するために、アプリケーションのルートモジュールに HammerModule をインポートする必要があります。

次に、app.module.ts ファイルに IgxCarouselModule をインポートします。

// app.module.ts

...
import { IgxCarouselModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxCarouselModule],
    ...
})
export class AppModule {}

このセクションでは、上記で定義したデモの設定を行います。

*ngFor を使用してスライドを追加する

同じ種類のコンテンツを含むスライドがある場合、最も簡単な方法は *ngFor を使用してテンプレートに追加する方法です。

スライドには画像のみが含まれるので、ts ファイルにオブジェクトの配列を作成し、それを使用して igx-carousel にスライドを追加します。

...
public slides = [
    { src: '/assets/images/carousel/ignite-ui-angular-indigo-design.png' },
    { src: '/assets/images/carousel/slider-image-chart.png' },
    { src: '/assets/images/carousel/ignite-ui-angular-charts.png' }
];
...

...
<div class="carousel-container">
    <igx-carousel #carousel>
            <igx-slide  *ngFor="let slide of slides;">
                <div class="image-container">
                    <img [src]="slide.src">
                </div>
             </igx-slide>
    </igx-carousel>
</div>
...

例

IgxCarousel の定義

デフォルトでは、カルーセルの loop 入力プロパティは true に設定されています (ループは、Next 動作でナビゲートするときに最初のスライドが最後のスライドの後に来るか、Previous 動作を使用して最後のスライドが最初のスライドの後に来るときに起こります)。ループ動作を無効にするには、loop 入力の値を false に設定します。

各スライドインデックスを追跡するために、カルーセルには、デフォルトでカルーセルの 下部 に配置されるインジケーターがあります。この動作を変更するには、indicatorsOrientation プロパティを使用して、top に割り当てる必要があります。空のテンプレートを追加すると、インジケーターを無効にできます。

カルーセルテンプレートは以下のようになります。

<div class="carousel-container">
    <igx-carousel #carousel [loop]="false">
      ...
        <!-- Adding an empty template to disable carousel's indicators -->
        <ng-template igxCarouselIndicator></ng-template>
    </igx-carousel>
</div>

カスタムインジケーター

カスタムカルーセルインジケーターを追加するには、以下のように IgxCarouselIndicatorDirective を使用する必要があります。

...
  <ng-template igxCarouselIndicator let-slide>
      <div [ngClass]="{'selected': slide.current === current}"></div>
  </ng-template>
...

カスタム nav ボタン

これを実現するために、IgxCarouselPrevButtonDirective と IgxCarouselNextButtonDirective ディレクティブを使用します。

...
    <ng-template igxCarouselNextButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_next</igx-icon>
        </button>
    </ng-template>

    <ng-template igxCarouselPrevButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_before</igx-icon>
        </button>
    </ng-template>
...

他のコンポーネントを含むスライド

このカルーセルには、フォームと画像を含むスライドが含まれます。

...
  <div class="carousel-container">
    <igx-carousel>
        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/SignUp.svg">
                <form #form class="signInForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>person</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Username</label>
                        <input igxInput id="username" type="text" />
                    </igx-input-group>
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>lock</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="password">Password</label>
                        <input igxInput id="password" type="password" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="raised" type="submit" (click)="form.reset()">Sign In</button>
                </div>
            </div>
        </igx-slide>

        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/Route.svg">
                <form #form2 class="searchForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>search</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Search</label>
                        <input igxInput id="search" type="text" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="raised" type="submit" (click)="form2.reset()">Search</button>
                </div>
            </div>
        </igx-slide>
    </igx-carousel>
</div>
...

デモ

アニメーション

アニメーション化されたスライド遷移により、エンドユーザーはカルーセルを操作しているときに高いエクスペリエンスを得ることができます。

デフォルトでカルーセルは slide アニメーションを使用するように設定されていますが、代替アニメーションとして fade もサポートしています。

アニメーションは animationType入力を介して構成されます。

<igx-carousel animationType="fade">
...
</igx-carousel>

animationType 入力に none を設定すると、カルーセルのアニメーションが無効になります。

デモ

以下のデモは、カルーセルがサポートするさまざまなタイプのアニメーションを示しています。

次へ/前へのスライドに移動するには、それぞれ以下を使用する必要があります。
- 右矢印キー - 次のスライド
- 左矢印キー - 前のスライド
最後/最初のスライドに移動するには、それぞれ以下を使用する必要があります。
- End キー - 最後のスライド
- Home キー - 最初のスライド

自動的なトランジション

IgxCarousel は、ユーザーの操作なしでスライドを自動的に変更するように簡単に構成できます。この方法では、トランジション間隔を interval プロパティに設定するだけで、スライドショーを作成できます。このプロパティは、スライドトランジション間の間隔 (ミリ秒)を決定します。

Note

自動的なスライドトランジションは、デフォルトでユーザーに完全に依存しているわけではありません。スライドの上にマウスポインターを置くと、マウスポインターがスライド領域から出るまで、現在のスライドトランジションが中断されます。これは、pause プロパティを false に設定することで防止できます。

高度な例

ループを有効にして完全に自動化されたカルーセルを作成しましょう。各スライドは、リスト内のリスト項目と同期されます。リスト項目をクリックすると、スライドの変更がトリガーされます。

これを実現するには、カルーセルを以下のように構成する必要があります。

gesturesSupport を無効にします。
ナビゲーション ボタンを無効にします。
カルーセルのインジケーターを無効にします。
ユーザーがスライドを操作すると pause を無効にします。
トランジション間隔を追加します。

カルーセルテンプレートは以下のようになります。

...
<div class="carousel-wrapper">
    <igx-carousel [navigation]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
        <div class="slides-wrapper">
            <igx-slide *ngFor="let item of slides">
                  <!-- Slides content goes here -->
             </igx-slide>
        </div>
        <!-- Adding an empty template to disable carousel's indicators -->
        <ng-template igxCarouselIndicator></ng-template>
    </igx-carousel>
</div>
...

カルーセル構成の準備ができました。次に、リストコンポーネントを追加して、両方のコンポーネントを同期します。

IgxList の追加:

...
<div class="list-wrapper">
    <igx-list displayDensity="compact">
      <!-- Adding disabled classes when the list item index does not match the current slide index-->
        <igx-list-item *ngFor="let item of slides; let i=index" [ngClass]="{'disabled': i !== currentIndex }" >
      <!-- List item content goes here -->
        </igx-list-item>
    </igx-list>
</div>
...

カルーセルの onSlideChanged およびリストの itemClicked イベントを処理し、コンポーネントを同期する方法:

  public ngOnInit() {
    this.list.itemClicked.subscribe((args: IListItemClickEventArgs) => {
        this.currentIndex = args.item.index;
        this.carousel.select(this.carousel.get(this.currentIndex));
    });

    this.carousel.onSlideChanged.subscribe((args: ISlideEventArgs) => {
        this.currentIndex = args.slide.index;
    });
  }

これらの構成の結果は以下のようになります。

ユーザー補助

WAI-ARIA の役割、状態、およびプロパティ

Carousel の基本要素の役割は region です。これは、ユーザーが簡単にナビゲートできるようにしたい特定の目的に関連するコンテンツを含むセクションです。
Carousel インジケーターの役割は tab です。これは、ユーザーに描画されるタブコンテンツを選択するためのメカニズムを提供するグループ化ラベルです。
タブのセット (カルーセルインジケーター) 役割のコンテナーとして機能する要素は、tablist に設定されます。
各スライド要素には、tabpanel の役割が設定されています。
igx-slides のセットのコンテナーとして機能する要素は、aria-live="polite" で設定されます。どちらのオプションも
- カルーセルが自動的に回転している場合、off になります。
- カルーセルが自動的に回転しない場合、polite になります。

ARIA のサポート

Carousel コンポーネント

属性:

aria-roledescription を 'carousel' に設定します。
aria-selected - アクティブなスライドに基づいて true または false に設定します。
aria-controls - コンテンツが現在の要素によって制御されるスライドインデックスを設定します。
aria-live - スクリーンリーダーがライブリージョンの更新を処理する優先度を設定するために使用されます。可能な設定は off および polite です。デフォルト設定は polite です。interval オプションが設定されている場合、aria-live 属性は off に設定されます。
スライドに基づく aria-label。
aria-label (ボタン)
- aria-label - 前のスライド用。
- aria-label - 次のスライド用。

Slide コンポーネント

役割:

attr.role="tabpanel" - タブに関連付けられたリソースのコンテナー。各タブはタブリストに含まれています。

属性:

Id - パターン "panel-${this.index}" に従います。
aria-labelledby は、"tab-${this.index}-${this.total}" のパターンに従います。
aria-selected は、アクティブ スライドを設定します。特定のスライド要素の現在の選択された状態を示します。

API リファレンス

テーマの依存関係

IgxIcon テーマ

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Carousel

Angular Carousel の例

使用方法

はじめに

Note

*ngFor を使用してスライドを追加する

例

IgxCarousel の定義

カスタムインジケーター

カスタム nav ボタン

他のコンポーネントを含むスライド

デモ

アニメーション

デモ

ナビゲーション

パンジェスチャ

キーボードナビゲーション

自動的なトランジション

Note

高度な例

ユーザー補助

WAI-ARIA の役割、状態、およびプロパティ

ARIA のサポート

Carousel コンポーネント

属性:

Slide コンポーネント

役割:

属性:

API リファレンス

テーマの依存関係

その他のリソース

テーマ設定

Carousel

Angular Carousel の例

使用方法

はじめに

Note

*ngFor を使用してスライドを追加する

例

IgxCarousel の定義

カスタム インジケーター

カスタム nav ボタン

他のコンポーネントを含むスライド

デモ

アニメーション

デモ

ナビゲーション

パン ジェスチャ

キーボード ナビゲーション

自動的なトランジション

Note

高度な例

ユーザー補助

WAI-ARIA の役割、状態、およびプロパティ

ARIA のサポート

Carousel コンポーネント

属性:

Slide コンポーネント

役割:

属性:

API リファレンス

テーマの依存関係

その他のリソース

テーマ設定

カスタムインジケーター

パンジェスチャ

キーボードナビゲーション