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 に割り当てる必要があります。インジケーターは、indicators 入力プロパティを false に設定することで無効にできます。

カスタムインジケーター

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

デモ

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

ナビゲーションボタン
- Space/Enter キー - 次のスライド/前のスライドに移動します。
インジケーター
- 左矢印 キー - 前のスライド (右から左モードでは次) に移動します。
- 右矢印 キー - 次のスライド (右から左モードでは前へ) に移動します。
- Home キー - 最初のスライド (右から左モードでは最後) に移動します。
- End キー - 最後のスライド (右から左モードでは最初) に移動します。

自動的なトランジション

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

Note

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

高度な例

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

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

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

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

...
<div class="carousel-wrapper">
    <igx-carousel [navigation]="false" [indicators]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
        <igx-slide *ngFor="let item of slides">
            <!-- Slides content goes here -->
        </igx-slide>
    </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 リファレンス

テーマの依存関係

IgxIcon テーマ

その他のリソース

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

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

Angular Carousel の例

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

Note

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

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

Angular Carousel のカスタム例

IgxCarousel の定義

カスタムインジケーター

カスタム nav ボタン

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

デモ

Angular Carousel のアニメーション

デモ

ナビゲーション

パンジェスチャ

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

自動的なトランジション

Note

高度な例

Note

ユーザー補助

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

ARIA のサポート

Carousel コンポーネント

属性:

Slide コンポーネント

役割:

属性:

API リファレンス

テーマの依存関係

その他のリソース

テーマ設定

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

Angular Carousel の例

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

Note

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

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

Angular Carousel のカスタム例

IgxCarousel の定義

カスタム インジケーター

カスタム nav ボタン

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

デモ

Angular Carousel のアニメーション

デモ

ナビゲーション

パン ジェスチャ

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

自動的なトランジション

Note

高度な例

Note

ユーザー補助

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

ARIA のサポート

Carousel コンポーネント

属性:

Slide コンポーネント

役割:

属性:

API リファレンス

テーマの依存関係

その他のリソース

テーマ設定

カスタムインジケーター

パンジェスチャ

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