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

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

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

React Carousel の例

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

使用方法

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

npm install igniteui-react

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

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

IgrCarouselModule.register();

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>

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

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

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

例

カルーセルの構成

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

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

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

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

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

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

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

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

カスタム インジケーター

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>

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>

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

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

<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>

サンプル

アニメーション

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

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

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

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

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

サンプル

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

ナビゲーション

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

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

タッチ ジェスチャー

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

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

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

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

自動的なトランジション

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

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

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

高度な例

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

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

• disablePauseOnInteraction プロパティを有効にします。
• hideNavigation プロパティを有効にします。
• vertical プロパティを有効にします。
• トランジション interval を追加します。
• 各スライドにカスタム IgrCarouselIndicator を追加します。

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

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>

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

ユーザー補助

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

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

ARIA のサポート

Carousel コンポーネント

• 属性
  • 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 リファレンス

• IgrCarousel
• IgrCarouselSlide
• IgrCarouselIndicator
• IgrIcon
• IgrInput
• IgrButton

その他のリソース

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