React Carousel (カルーセル) の概要

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

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

    以下に示す React カルーセルのデモは、画像のみを含むスライドを示しています。

    EXAMPLE
    TSX
    CarouselOverview.css
    index.css
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    使用方法

    まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

    npm install igniteui-react
cmd

    次に、以下のように、IgrCarousel とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

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

IgrCarouselModule.register();
tsx

    Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。

    Ignite UI for React カルーセルがインポートされたので、IgrCarousel とそのボタンの基本構成を開始できます。

    IgrCarousel セレクターを使用してスライドをラップします。スライドに有効な HTML コンテンツ、その他のコンポーネントなども含めることができます。

    <IgrCarousel>
    <IgrCarouselSlide key="first">
        <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" key="img"/>
    </IgrCarouselSlide>
    <IgrCarouselSlide key="second">
        <img src="assets/images/carousel/slider-image-chart.png" key="img"/>
    </IgrCarouselSlide>
    <IgrCarouselSlide key="third">
        <img src="assets/images/carousel/ignite-ui-angular-charts.png" key="img"/>
    </IgrCarouselSlide>
</IgrCarousel>
tsx

    スライドをデフォルトでアクティブにしたい場合は、Active 属性を使用します。

    <IgrCarousel>
    ...
    <IgrCarouselSlide key="first">
        ...
    </IgrCarouselSlide>
    <IgrCarouselSlide active={true} key="second">
        ...
    </IgrCarouselSlide>
</IgrCarousel>
tsx

    アクティブなスライドが設定されていない場合は、最初のスライドがデフォルトで設定されます。最初のレンダリングまたは後続の更新時にアクティブなスライドが複数ある場合は、最後のスライドだけが考慮されます。

    Ignite UI for React | CTA Banner

    例

    カルーセルの構成

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

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

    各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの end に配置されるインジケーターがあります。この動作を変更するには、indicatorsOrientation プロパティを使用して、start に割り当てる必要があります。

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

    デフォルトでは、IgrCarousel にはナビゲーション ボタンとインジケーターが表示されます。インジケーターを非表示にするには hideIndicators プロパティを使用し、ナビゲーション ボタンを非表示にするには hideNavigation プロパティを使用します。

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

    IgrCarousel は垂直モードをサポートしています。これを有効にするには、vertical プロパティを使用します。

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

    カスタム インジケーター

    React カスタム カルーセル インジケーターを追加するには、IgrCarouselIndicator を使用します:

    <IgrCarousel>
    <IgrCarouselIndicator key="first-indicator">
        <span key="empty">🤍</span>
        <span slot="active" key="active">❤️</span>
    </IgrCarouselIndicator>
    <IgrCarouselIndicator key="second-indicator">
        <span key="empty">🤍</span>
        <span slot="active" key="active">❤️</span>
    </IgrCarouselIndicator>

    <IgrCarouselSlide key="first">
        <img src="assets/images/card/media/the_red_ice_forest.jpg" key="img"/>
    </IgrCarouselSlide>
    <IgrCarouselSlide key="second">
        <img src="assets/images/card/media/yosemite.jpg" key="img"/>
    </IgrCarouselSlide>
</IgrCarousel>
tsx

    Ignite UI for React カルーセル コンポーネントを使用すると、ユーザーは単一のインジケーターのアクティブ状態と非アクティブ状態に異なる要素を使用できます。インジケーターを宣言するときは、たとえ同じであっても、スロットごとに 2 つの要素 (空とアクティブ) を提供することが必須です。

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

    これを実現するには、previous-button スロットと next-button スロットを使用します。

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

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

    このカルーセルには、フォームと画像を含むスライドが含まれます。

    <IgrCarousel>
    <IgrCarouselSlide key="slide-1">
        <div key="slide-content">
            <img src="assets/images/svg/carousel/SignUp.svg"/>
            <form>
                <IgrInput type="text" placeholder="Username">
                    <IgrIcon slot="prefix" name="person" key="icon"></IgrIcon>
                </IgrInput>
                <IgrInput type="password" placeholder="Password">
                    <IgrIcon slot="prefix" name="password" key="icon"></IgrIcon>
                </IgrInput>
                <IgrButton type="reset">
                    <span key="button-span">Sign In</span>
                </IgrButton>
            </form>
        </div>
    </IgrCarouselSlide>
    <IgrCarouselSlide key="slide-2">
        <div key="slide-content">
            <img src="assets/images/svg/carousel/Route.svg"/>
            <form>
                <IgrInput type="text" placeholder="Search">
                    <IgrIcon slot="prefix" name="search" key="icon"></IgrIcon>
                </IgrInput>
                <IgrButton type="reset">
                    <span key="button-span">Search</span>
                </IgrButton>
            </form>
        </div>
    </IgrCarouselSlide>
</IgrCarousel>
tsx

    サンプル

    EXAMPLE
    TSX
    CarouselComponents.css
    index.css
    Edit in:

    アニメーション

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

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

    アニメーションを変更するには、animationType プロパティを使用します。

    <IgrCarousel animationType={CarouselAnimationType.Fade}>
    ...
</IgrCarousel>
tsx

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

    サンプル

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

    EXAMPLE
    TSX
    CarouselAnimations.css
    index.css
    Edit in:

    ナビゲーション

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

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

    タッチ ジェスチャー

    デフォルトでカルーセルはあらゆるタッチ対応デバイスに使用できます。

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

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

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

    自動的なトランジション

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

    カルーセル コンテンツの上にマウスを移動するか、キーボード フォーカスをいずれかのカルーセル コンテンツに移動すると、自動トランジションが一時停止されます。マウスがカルーセルから離れるか、キーボード フォーカスがカルーセル コンテンツから移動すると、自動トランジションが再開されます。 この動作は、disablePauseOnInteraction プロパティを true に設定することでこれを防ぐことができます。

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

    高度な例

    ループを有効にして完全に自動化されたカルーセルを作成しましょう。各スライドのサムネイル表示になるようにインジケーターを設定します。

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

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

    const images = [
    {
        src: "assets/images/carousel/WonderfulCoast.png",
        alt: "Wonderful Coast",
    },
    {
        src: "assets/images/carousel/CulturalDip.png",
        alt: "Cultural Dip",
    },
    {
        src: "assets/images/carousel/GoldenBeaches.png",
        alt: "Golden Beaches",
    },
    {
        src: "assets/images/carousel/IslandOfHistory.png",
        alt: "Island Of History",
    },
    {
        src: "assets/images/carousel/AmazingBridge.png",
        alt: "Amazing Bridge",
    },
];

<IgrCarousel
    disablePauseOnInteraction={true}
    hideNavigation={true}
    interval={2000}
    vertical={true}
    animationType={CarouselAnimationType.Fade}
>
    {images.map((image, index) => {
        return (
            <React.Fragment key={index}>
                <IgrCarouselSlide key={`slide-${index}`}>
                    <img src={image.src} alt={image.alt} key="slide-img" />
                </IgrCarouselSlide>
                <IgrCarouselIndicator key={`indicator-${index}`}>
                    <img
                        key="img-blur"
                        className="blurred"
                        src={image.src.replace(".png", "Thumb.png")}
                        alt={`${image.alt} Thumb`}
                        width="50"
                        height="60"
                    />
                    <img
                        key="img-active"
                        slot="active"
                        src={image.src.replace(".png", "Thumb.png")}
                        alt={`${image.alt} Thumb Active`}
                        width="50"
                        height="60"
                    />
                </IgrCarouselIndicator>
            </React.Fragment>
        );
    })}
</IgrCarousel>
tsx

    これらの構成の結果は以下のようになります。

    EXAMPLE
    TSX
    CarouselThumbnail.css
    index.css
    Edit in:

    ユーザー補助

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

    • カルーセルの基本要素の役割は region です。これは、ユーザーが簡単にナビゲートできるようにしたい特定の目的に関連するコンテンツを含むセクションです。
    • カルーセル インジケーターの役割は tab です。これは、ユーザーに描画されるタブ コンテンツを選択するためのメカニズムを提供するグループ化ラベルです。
    • タブのセット (カルーセル インジケーター) 役割のコンテナーとして機能する要素は、tablist に設定されます。
    • 各スライド要素には、tabpanel の役割が設定されています。

    ARIA のサポート

    • 属性
      • aria-roledescription を 「carousel」 に設定します。
      • aria-live - スクリーン リーダーがライブ リージョンの更新を処理する優先度を設定するために使用されます。可能な設定は off おとび polite です。デフォルト設定は polite であり、スライド セットのコンテナーとして機能する要素に設定されています。interval オプションが設定され、カルーセルが再生状態の場合、aria-live 属性は off に設定されます。
      • aria-label (ナビゲーション ボタン) - 「前のスライド」/「次のスライド」。

    Slide コンポーネント

    • 属性
      • id - 「igc-carousel-slide-${incremented_number}」 のパターンに従います。
      • aria-roledescription を 「slide」 に設定します。
      • aria-label は 「${index + 1} of ${total}」 のパターンに従います。

    Indicator コンポーネント

    • 属性
      • aria-label は 「Slide ${index + 1}」 のパターンに従います。
      • aria-selected - アクティブなスライドに基づいて true または false に設定します。

    API リファレンス

    その他のリソース