Carousel (カルーセル) コンポーネント

Ignite UI for Angular Carousel は、画像、カード、その他のコンテンツをナビゲーション コントロールとインジケーターとともに表示するためのスライド ベースのレイアウト コンポーネントです。

関連する少数のスライドをユーザーが 1 枚ずつ閲覧する場合は、Carousel を使用します。必要に応じて、アニメーション、カスタム ナビゲーション、自動トランジションを追加できます。

ライブ デモ

構造

Carousel コンポーネントは、ホスト要素、投影されたスライド、ナビゲーション コントロール、およびアクティブなスライドを選択するインジケーターで構成されます。

igx-carousel                     // ホスト - スライド、ナビゲーション、インジケーターを調整します
|- igx-slide                      // スライド アイテム
|- ng-template[igxCarouselIndicator]   // 任意のカスタム インジケーター テンプレート
|- ng-template[igxCarouselPrevButton]  // 前へ移動するナビゲーションの任意のテンプレート
`- ng-template[igxCarouselNextButton]  // 次へ移動するナビゲーションの任意のテンプレート

作業の開始

Angular Carousel では、スライドを宣言する前に、Carousel コンポーネント、Slide コンポーネント、テーマ スタイルシートを用意しておく必要があります。

Carousel をアプリケーションに追加する前に、作業の開始トピックで Ignite UI for Angular をインストールし、テーマを構成してください。

Carousel ディレクティブと Ignite UI テーマ スタイルシートをインポートします。

import { Component } from '@angular/core';
import { IGX_CAROUSEL_DIRECTIVES } from 'igniteui-angular/carousel';

@Component({
    selector: 'app-carousel-sample',
    imports: [IGX_CAROUSEL_DIRECTIVES],
    template: `
        <igx-carousel>
            <igx-slide>
                <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" alt="Ignite UI Indigo Design" />
            </igx-slide>
        </igx-carousel>
    `,
})
export class CarouselSampleComponent {}

使用方法

Angular Carousel は、ホスト内に Slide コンポーネントを配置し、レイアウトに必要なナビゲーション、インジケーター、トランジション動作を有効にすることで構成します。

スライド

Carousel セレクターを使用してスライドをラップします。スライドには画像、テキスト、フォーム、その他のコンポーネントを含めることができます。

<igx-carousel>
    <igx-slide>
        <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" alt="Ignite UI Indigo Design" />
    </igx-slide>
    <igx-slide>
        <img src="assets/images/carousel/slider-image-chart.png" alt="Chart preview" />
    </igx-slide>
    <igx-slide>
        <img src="assets/images/carousel/ignite-ui-angular-charts.png" alt="Ignite UI Charts" />
    </igx-slide>
</igx-carousel>

アクティブなスライド

Carousel のレンダリング時に選択するスライドに active 入力を設定します。

<igx-carousel>
    <igx-slide>
        ...
    </igx-slide>
    <igx-slide [active]="true">
        ...
    </igx-slide>
</igx-carousel>

構成

ループ、インジケーターの配置、ナビゲーションの表示、方向を制御するには、Carousel の構成プロパティを使用します。

loop 入力を使用して、最後のスライドから最初のスライドへ、または最初のスライドから最後のスライドへループするかどうかを制御します。

<igx-carousel [loop]="false">
    ...
</igx-carousel>

indicatorsOrientation プロパティを使用して、インジケーターの配置位置を変更します。

<igx-carousel indicatorsOrientation="start">
    ...
</igx-carousel>

インジケーターを非表示にするには indicators を使用し、ナビゲーション ボタンを非表示にするには navigation を使用します。

<igx-carousel [navigation]="false" [indicators]="false">
    ...
</igx-carousel>

Carousel を垂直モードで表示するには、vertical プロパティを使用します。

<igx-carousel [vertical]="true">
    ...
</igx-carousel>

カスタム インジケーター

デフォルトのインジケーター コンテンツを置き換えるには、IgxCarouselIndicatorDirective テンプレート ディレクティブを使用します。

<igx-carousel>
    <ng-template igxCarouselIndicator let-slide>
        <div [ngClass]="{ selected: slide.current === current }"></div>
    </ng-template>
    <igx-slide>
        <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" alt="Ignite UI Indigo Design" />
    </igx-slide>
    <igx-slide>
        <img src="assets/images/carousel/slider-image-chart.png" alt="Chart preview" />
    </igx-slide>
</igx-carousel>

カスタム ナビゲーション ボタン

カスタム ナビゲーション ボタンのコンテンツを指定するには、IgxCarouselPrevButtonDirective と IgxCarouselNextButtonDirective テンプレート ディレクティブを使用します。

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

デフォルトのナビゲーション コントロールがデザインに合わない場合は、これらのテンプレートにテキスト、SVG、または Icon コンテンツを使用してください。

スライドのコンテンツ

Carousel の各ステップでより充実したコンテンツが必要な場合は、スライド内にフォーム、画像、その他のコンポーネントを配置します。

<igx-carousel>
    <igx-slide>
        <div>
            <img src="assets/images/svg/carousel/SignUp.svg" alt="Sign up" />
            <form>
                <igx-input-group>
                    <igx-prefix>
                        <igx-icon>person</igx-icon>
                    </igx-prefix>
                    <input igxInput type="text" placeholder="Username" />
                </igx-input-group>
                <igx-input-group>
                    <igx-prefix>
                        <igx-icon>password</igx-icon>
                    </igx-prefix>
                    <input igxInput type="password" placeholder="Password" />
                </igx-input-group>
                <button igxButton="contained" type="reset">Sign In</button>
            </form>
        </div>
    </igx-slide>
</igx-carousel>

アニメーション

スライド遷移アニメーションを変更するには、animationType プロパティを設定します。

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

animationType プロパティを none に設定すると、アニメーションが無効になります。

タッチ ジェスチャー

設定されたスライド遷移をスワイプ ナビゲーションに反映させる必要がある場合は、タッチ対応デバイスで Carousel を使用します。

パン ジェスチャーを無効にする必要がある場合は、gesturesSupport 入力を false に設定します。

<igx-carousel [gesturesSupport]="false">
    ...
</igx-carousel>

自動トランジション

自動スライドショーを作成するには interval 入力を設定し、操作時にトランジションを一時停止させたくない場合は pause を false に設定します。

<igx-carousel [interval]="2000" [pause]="false">
    ...
</igx-carousel>

サムネイル インジケーター

インジケーターで対応するスライドをプレビューする場合は、IgxCarouselIndicatorDirective テンプレート ディレクティブを使用して、各インジケーターにサムネイル画像を表示します。

<igx-carousel [navigation]="false" [pause]="false" [interval]="2000" [vertical]="true" animationType="fade">
    <ng-template igxCarouselIndicator let-slide>
        <img
            [class.blurred]="!slide.active"
            [src]="slides[slide.index].thumbnail"
            [alt]="slides[slide.index].alt + ' thumbnail'"
            width="50"
            height="60" />
    </ng-template>

    @for (slide of slides; track slide.image) {
        <igx-slide>
            <img class="slide-image" [src]="slide.image" [alt]="slide.alt" />
        </igx-slide>
    }
</igx-carousel>

使用すべき場合と使用すべきでない場合

使用すべき場合: 関連する画像や複数種類のコンテンツを含む少数のスライドを、ユーザーが 1 枚ずつ閲覧できるように表示する必要がある場合に Carousel を使用します。

使用すべきでない場合: プライマリ ナビゲーション、長い連続的なワークフロー、またはユーザーが並べて比較する必要があるコンテンツには Carousel を使用しないでください。名前付きセクションを切り替えるには Tabs を、ガイド付きの連続タスクには Stepper を使用してください。

使用すべき	使用すべきでない

プロパティ

以下の Carousel プロパティは、スライド ベースのレイアウトで最もよく使用される構成をカバーしています。

スタイル設定

Carousel は、公開されたパーツ、カスタム インジケーター コンテンツ、カスタム ナビゲーション スロットを通じてスタイル設定できます。

Sass テーマ

Carousel にアプリケーション全体で一貫性を保つべきテーマ レベルの変更が必要な場合は、Sass テーマを使用します。

主要なテーマ パラメーターとして $button-background と $indicator-background を使用してください。テーマはこれらから関連するインタラクション状態の色を導出します。特定の微調整には残りのパラメーターを使用してください。

パーツとスロット

Carousel の特定のサーフェスのみにカスタム コンテンツやローカル スタイル設定が必要な場合は、公開されているスロットとパーツを使用します。

Tailwind によるスタイル設定

Ignite UI コンポーネント トークンと共にユーティリティ ファーストのレイアウト スタイリングが必要な場合は、Ignite UI for Angular Carousel で Tailwind ユーティリティ クラスを使用します。

アクセシビリティ

Angular Carousel は、キーボードおよび支援技術を使用するユーザー向けに、カルーセル、スライド、インジケーターのセマンティクスを公開します。

キーボード インタラクション

スクリーン リーダー / ARIA

Carousel は、ホスト、スライド、インジケーター、ナビゲーション コントロールに ARIA の役割と状態を提供します。

アクセシビリティ準拠

インフラジスティックスは、アクセシビリティ準拠 トピックで、Section 508 および WCAG 2.1 ガイドライン領域における Ignite UI for Angular のアクセシビリティ サポートを文書化しています。

アプリケーションの作成者は、意味のあるスライド コンテンツ、画像の代替テキスト、カスタム インジケーターまたはナビゲーション コンテンツに対する十分なコントラストを引き続き提供する必要があります。

API リファレンス

生成された API リファレンスには、Carousel、Slide、Indicator、および関連するサポート コンポーネントの API がすべて記載されています。

依存関係

Carousel の例は、Carousel の Slide 型と Indicator 型、およびテーマ スタイルシートに依存しています。スライドやナビゲーション スロット内で Input、Icon、Button の各コンポーネントを使用する場合は、それらのコンポーネントにも依存します。

その他のリソース

より広範な製品サポートおよびソース情報については、これらのリソースを使用してください。

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

関連コンポーネント

Carousel が最適なインタラクション モデルでない場合は、これらの関連レイアウト コンポーネントを使用してください。

• Tabs - スライド形式のナビゲーションなしで名前付きセクションを切り替える必要がある場合は Tabs を使用します。
• Stepper - ガイド付きの一連の手順を完了する必要がある場合は Stepper を使用します。

FAQ