Web Components Carousel (カルーセル) の概要

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

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

Web Components Carousel の例

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

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

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

import { defineComponents, IgcCarouselComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCarouselComponent);

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

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

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

<igc-carousel>
    <igc-carousel-slide>
        <img src="assets/images/carousel/ignite-ui-indigo-design.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/slider-image-chart.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/ignite-ui-charts.png"/>
    </igc-carousel-slide>
</igc-carousel>

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

<igc-carousel>
    ...
    <igc-carousel-slide>
        ...
    </igc-carousel-slide>
    <igc-carousel-slide active>
        ...
    </igc-carousel-slide>
</igc-carousel>

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

例

カルーセルの構成

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

<igc-carousel disable-loop="true">
    ...
</igc-carousel>

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

<igc-carousel indicators-orientation="start">
    ...
</igc-carousel>

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

<igc-carousel hide-navigation="true" hide-indicators="true">
    ...
</igc-carousel>

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

<igc-carousel vertical="true">
    ...
</igc-carousel>

カスタムインジケーター

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

<igc-carousel>
    <igc-carousel-indicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </igc-carousel-indicator>

    <igc-carousel-slide>
        <img src="assets/images/card/media/the_red_ice_forest.jpg"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/card/media/yosemite.jpg"/>
    </igc-carousel-slide>
</igc-carousel>

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

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

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

<igc-carousel>
    <igc-icon slot="previous-button" name="previous" collection="material"></igc-icon>
    <igc-icon slot="next-button" name="next" collection="material"></igc-icon>
    ...
</igc-carousel>

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

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

<igc-carousel>
    <igc-carousel-slide>
        <div>
            <img src="assets/images/svg/carousel/SignUp.svg"/>
            <form>
                <igc-input type="text" placeholder="Username">
                    <igc-icon slot="prefix" name="person"></igc-icon>
                </igc-input>
                <igc-input type="password" placeholder="Password">
                    <igc-icon slot="prefix" name="password"></igc-icon>
                </igc-input>
                <igc-button type="reset">Sign In</igc-button>
            </form>
        </div>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <div>
            <img src="assets/images/svg/carousel/Route.svg"/>
            <form>
                <igc-input type="text" placeholder="Search">
                    <igc-icon slot="prefix" name="search"></igc-icon>
                </igc-input>
                <igc-button type="reset">Search</igc-button>
            </form>
        </div>
    </igc-carousel-slide>
</igc-carousel>

サンプル

アニメーション

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

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

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

<igc-carousel animation-type="fade">
    ...
</igc-carousel>

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

サンプル

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

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

自動的なトランジション

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

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

<igc-carousel interval="2000" disable-pause-on-interaction="true">
    ...
</igc-carousel>

高度な例

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

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

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

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

<igc-carousel
    disable-pause-on-interaction="true"
    hide-navigation="true"
    vertical="true"
    interval="2000"
    animation-type="fade"
>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
    <igc-carousel-indicator>
        <img class="blurred" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60"/>
        <img slot="active" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60"/>
    </igc-carousel-indicator>
        
    <igc-carousel-slide>
        <img src="assets/images/carousel/WonderfulCoast.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/CulturalDip.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/GoldenBeaches.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/IslandOfHistory.png"/>
    </igc-carousel-slide>
    <igc-carousel-slide>
        <img src="assets/images/carousel/AmazingBridge.png"/>
    </igc-carousel-slide>
</igc-carousel>

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

ユーザー補助

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 に設定します。

Web Components Carousel (カルーセル) の概要

Web Components Carousel の例

使用方法

例

カルーセルの構成

カスタムインジケーター

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

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

サンプル

アニメーション

サンプル

ナビゲーション

タッチジェスチャー

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

自動的なトランジション

高度な例

ユーザー補助

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

ARIA のサポート

Carousel コンポーネント

Slide コンポーネント

Indicator コンポーネント

API リファレンス

その他のリソース

Web Components Carousel (カルーセル) の概要

Web Components Carousel の例

使用方法

例

カルーセルの構成

カスタム インジケーター

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

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

サンプル

アニメーション

サンプル

ナビゲーション

タッチ ジェスチャー

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

自動的なトランジション

高度な例

ユーザー補助

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

ARIA のサポート

Carousel コンポーネント

Slide コンポーネント

Indicator コンポーネント

API リファレンス

その他のリソース

カスタムインジケーター

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

タッチジェスチャー

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