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

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

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

ライブ デモ

構造

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

igc-carousel                     // ホスト - スライド、ナビゲーション、インジケーターを調整します
|- igc-carousel-slide             // スライド アイテム
|- igc-carousel-indicator          // スライドの任意のカスタム インジケーター
|- [slot="previous-button"]        // 前へ移動するナビゲーションの任意のカスタム コンテンツ
`- [slot="next-button"]            // 次へ移動するナビゲーションの任意のカスタム コンテンツ

作業の開始

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

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

Carousel ラッパー コンポーネントとテーマ スタイルシートをインポートします。

import { IgrCarousel, IgrCarouselSlide } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

使用方法

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

スライド

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

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

アクティブなスライド

Carousel のレンダリング時に選択するスライドに active プロパティを設定します。

<IgrCarousel>
    <IgrCarouselSlide>
        ...
    </IgrCarouselSlide>
    <IgrCarouselSlide active={true}>
        ...
    </IgrCarouselSlide>
</IgrCarousel>

構成

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

disableLoop プロパティは、最後のスライドから最初のスライドへ、または最初のスライドから最後のスライドへ移動するループ動作を無効にします。

<IgrCarousel disableLoop={true}>
    ...
</IgrCarousel>

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

<IgrCarousel indicatorsOrientation={CarouselIndicatorsOrientation.Start}>
    ...
</IgrCarousel>

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

<IgrCarousel hideNavigation={true} hideIndicators={true}>
    ...
</IgrCarousel>

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

<IgrCarousel vertical={true}>
    ...
</IgrCarousel>

カスタム インジケーター

デフォルトのインジケーター コンテンツを置き換えるには、IgrCarouselIndicator コンポーネントを使用します。

<IgrCarousel>
    <IgrCarouselIndicator>
        <span>Off</span>
        <span slot="active">On</span>
    </IgrCarouselIndicator>
    <IgrCarouselIndicator>
        <span>Off</span>
        <span slot="active">On</span>
    </IgrCarouselIndicator>
    <IgrCarouselSlide>
        <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" alt="Ignite UI Indigo Design" />
    </IgrCarouselSlide>
    <IgrCarouselSlide>
        <img src="assets/images/carousel/slider-image-chart.png" alt="Chart preview" />
    </IgrCarouselSlide>
</IgrCarousel>

カスタム インジケーターごとに、デフォルトのインジケーター コンテンツと active スロットのコンテンツの両方を用意してください。

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

previous-button スロットと next-button スロットを使用して、カスタム ナビゲーション ボタンのコンテンツを指定します。

<IgrCarousel>
    <IgrIcon slot="previous-button" name="previous" collection="material"></IgrIcon>
    <IgrIcon slot="next-button" name="next" collection="material"></IgrIcon>
    ...
</IgrCarousel>

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

スライドのコンテンツ

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

<IgrCarousel>
    <IgrCarouselSlide>
        <div>
            <img src="assets/images/svg/carousel/SignUp.svg" alt="Sign up" />
            <form>
                <IgrInput type="text" placeholder="Username">
                    <IgrIcon slot="prefix" name="person"></IgrIcon>
                </IgrInput>
                <IgrInput type="password" placeholder="Password">
                    <IgrIcon slot="prefix" name="password"></IgrIcon>
                </IgrInput>
                <IgrButton type="reset">
                    <span>Sign In</span>
                </IgrButton>
            </form>
        </div>
    </IgrCarouselSlide>
</IgrCarousel>

アニメーション

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

<IgrCarousel animationType="fade">
    ...
</IgrCarousel>

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

タッチ ジェスチャー

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

自動トランジション

自動スライドショーを作成するには、interval プロパティを設定します。

ポインターまたはキーボードの操作中も自動トランジションを継続させたい場合は、disablePauseOnInteraction を true に設定します。

<IgrCarousel interval={2000} disablePauseOnInteraction={true}>
    ...
</IgrCarousel>

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

各インジケーターが対応するスライドをプレビューする必要がある場合は、サムネイル画像を使用したカスタム インジケーターを使用します。

const images = [
    {
        src: "assets/images/carousel/WonderfulCoast.png",
        alt: "Wonderful Coast",
    },
];

<IgrCarousel disablePauseOnInteraction={true} hideNavigation={true} interval={2000} vertical={true} animationType="fade">
    {images.map((image, index) => (
        <React.Fragment key={index}>
            <IgrCarouselSlide>
                <img src={image.src} alt={image.alt} />
            </IgrCarouselSlide>
            <IgrCarouselIndicator>
                <img
                    className="blurred"
                    src={image.src.replace(".png", "Thumb.png")}
                    alt={`${image.alt} thumbnail`}
                    width="50"
                    height="60"
                />
                <img
                    slot="active"
                    src={image.src.replace(".png", "Thumb.png")}
                    alt={`${image.alt} thumbnail active`}
                    width="50"
                    height="60"
                />
            </IgrCarouselIndicator>
        </React.Fragment>
    ))}
</IgrCarousel>

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

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

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

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

プロパティ

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

スタイル設定

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

Sass テーマ

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

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

パーツとスロット

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

Tailwind によるスタイル設定

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

アクセシビリティ

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

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

スクリーン リーダー / ARIA

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

アクセシビリティ準拠

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

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

API リファレンス

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

依存関係

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

その他のリソース

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

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

関連コンポーネント

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

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

FAQ