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 を設定すると、カルーセルのアニメーションが無効になります。

デモ

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

ナビゲーション

トランジションとナビゲーションは、最も重要なカルーセル機能です。

カルーセル内のナビゲーションは、モバイル デバイスでのナビゲーション ボタン、キーボード ナビゲーション、パン操作を通じてユーザーが処理できます。

パン ジェスチャ

デフォルトでカルーセルはあらゆるタッチ対応デバイスに使用できます。これはオプションであり、gesturesSupport プロパティを false に設定して変更できます。

カルーセル アニメーションはタッチ デバイスで完全にサポートされているため、プラットホームに合わせてプログレッシブ Web アプリケーション (PWA) を構築するための完璧なツールです。

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

• 次へ/前へのスライドに移動するには、それぞれ以下を使用する必要があります。
  • 右矢印キー - 次のスライド
  • 左矢印キー - 前のスライド
• 最後/最初のスライドに移動するには、それぞれ以下を使用する必要があります。
  • 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 リファレンス

• IgxCarouselComponent
• IgxCarouselComponent スタイル
• IgxSlideComponent
• IgxListComponent
• IgxListItemComponent

テーマの依存関係

• IgxIcon テーマ

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)