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
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。