Angular Carousel (カルーセル) コンポーネントの概要

Ignite UI for Angular Carousel は、レスポンシブで軽量なコンポーネントであり、テキスト スライド、リンク、およびその他の html 要素を含む画像のコレクションを前後に移動するユーザーに、スライドショーのような Web エクスペリエンスを作成する最も柔軟な方法を提供します。

Angular Carousel コンポーネントを使用すると、アニメーション、スライド トランジション、およびカスタマイズを使用できるため、インターフェイスを簡単に微調整して Angular カスタム カルーセルを構築できます。

Angular Carousel の例

以下に示す Angular Carousel のデモは、画像のみを含むスライドを示しています。ナビゲーション ボタンを有効にして、ユーザーがスライド間を簡単に移動できるようにしました。

Ignite UI for Angular Carousel を使用した作業の開始

Ignite UI for Angular Carousel コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

The next step is to import the IgxCarouselModule in our app.module.ts file:

Note

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

// app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxCarouselModule } from 'igniteui-angular';
// import { IgxCarouselModule } from '@infragistics/igniteui-angular'; for licensed package

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

あるいは、16.0.0 以降、IgxCarouselComponent をスタンドアロンの依存関係としてインポートすることも、IGX_CAROUSEL_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-carousel>
        <igx-slide *ngFor="let slide of slides">
            <div class="image-container">
                <img [src]="slide.src" />
            </div>
        </igx-slide>
    </igx-carousel>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [HammerModule, IGX_CAROUSEL_DIRECTIVES]
    /* or imports: [HammerModule, IgxCarouselComponent, IgxSlideComponent] */
})
export class HomeComponent {}

Ignite UI for Angular Carousel モジュールまたはディレクティブをインポートしたので、igx-carousel コンポーネントの使用を開始できます。

Angular Carousel コンポーネントの使用

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

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

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

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

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

@Component({...})
export class HomeComponent {
    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>

Angular Carousel のカスタム例

IgxCarousel の定義

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

各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの bottom に配置されるインジケーターがあります。この動作を変更するには、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>

カスタム インジケーター

Angular カスタム カルーセル インジケーターを追加するには、以下のように 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="contained" 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="contained" type="submit" (click)="form2.reset()">Search</button>
                </div>
            </div>
        </igx-slide>
    </igx-carousel>
</div>
...

デモ

Angular Carousel のアニメーション

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

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

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

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

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

デモ

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

ナビゲーション

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

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

パン ジェスチャ

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

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

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

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

自動的なトランジション

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

Note

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

高度な例

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

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

• gesturesSupport を無効にします。
• navigation ボタンを無効にします。
• カルーセル indicator を無効にします。
• ユーザーがスライドを操作すると pause を無効にします。
• トランジション interval を追加します。

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

...
<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>
      <!-- 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>
...

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

Note

v15.1.0 以降、onSlideChanged の名前が slideChanged に変更されました。ng update を使用すると、新しいイベント名を使用する前にコードが自動的に移行されます。

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

    this.carousel.slideChanged.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 (英語)