Components List

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

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

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

Web Components Carousel の例

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

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

defineComponents(IgcCarouselComponent);

export class CarouselOverview {
    constructor() {}
}

new CarouselOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-container">
        <igc-carousel>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-indigo-design.png"/>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slider-image-chart.png"/>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="image-container">
              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-charts.png"/>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.carousel-container {
    padding: 16px;
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

img {
    object-fit: fill;
    max-width: 90%;
}

igc-carousel {
    margin-inline: auto;
    max-width: 75%;
    height: 450px;
}

igc-carousel-slide::part(base) {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 75%;
    margin-inline: auto;
}css

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

使用方法

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

npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcCarouselComponent);
ts

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

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

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

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

例

カルーセルの構成

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

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

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

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

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

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

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

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

カスタムインジケーター

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

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

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

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

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

サンプル

import { defineComponents, IgcButtonComponent, IgcCarouselComponent, IgcIconComponent, IgcInputComponent, registerIconFromText } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent, IgcInputComponent, IgcButtonComponent, IgcIconComponent);

const icons = [
    {
        name: "person",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z"/></svg>'
    },
    {
        name: "password",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 10.0546V8C5.25 4.27208 8.27208 1.25 12 1.25C15.7279 1.25 18.75 4.27208 18.75 8V10.0546C19.8648 10.1379 20.5907 10.348 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.40931 10.348 4.13525 10.1379 5.25 10.0546ZM6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C16.867 10 16.4515 10 16 10H8C7.54849 10 7.13301 10 6.75 10.0036V8ZM14 16C14 17.1046 13.1046 18 12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14C13.1046 14 14 14.8954 14 16Z"/></svg>'
    },
    {
        name: "search",
        iconText:
            '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>'
    }
];

export class CarouselComponents {
    constructor() {
        icons.forEach((icon) => {
            registerIconFromText(icon.name, icon.iconText);
        });
    }
}

new CarouselComponents();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel With Components</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-container">
        <igc-carousel>
          <igc-carousel-slide>
            <div>
              <img src="https://www.infragistics.com/angular-demos-lob/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="https://www.infragistics.com/angular-demos-lob/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>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.carousel-container {
    padding: 16px;
}

igc-carousel {
    margin-inline: auto;
    max-width: 75%;
    height: 500px;
}

igc-carousel-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

igc-carousel-slide div {
    text-align: center;
    max-width: 40%;
    margin-inline: auto;
}

igc-carousel-slide div * {
    margin-block: 8px;
}css

アニメーション

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

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

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

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

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

サンプル

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

import { defineComponents, IgcButtonComponent, IgcCardComponent, IgcCarouselComponent, IgcSelectComponent, IgcSwitchComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcCarouselComponent, IgcSelectComponent, IgcCardComponent, IgcButtonComponent, IgcSwitchComponent);

export class CarouselAnimations {
    private carousel: IgcCarouselComponent;
    private select: IgcSelectComponent;
    private switch: IgcSwitchComponent;

    constructor() {
        this.carousel = document.querySelector('igc-carousel') as IgcCarouselComponent;
        this.select = document.querySelector('igc-select') as IgcSelectComponent;
        this.switch = document.querySelector('igc-switch') as IgcSwitchComponent;

        this.select.addEventListener("igcChange", (e) => {
            const animation = e.detail.value as 'slide' | 'fade' | 'none';
            this.carousel.animationType = animation;
        });

        this.switch.addEventListener("igcChange", (e) => {
            this.carousel.vertical = e.detail.checked;
        });
    }
}

new CarouselAnimations();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Animations</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="carousel-wrapper">
        <div class="action-wrapper">
          <div class="action">
            <span>Animation type</span>
            <igc-select id="select">
              <igc-select-item value="slide" selected>Slide</igc-select-item>
              <igc-select-item value="fade">Fade</igc-select-item>
              <igc-select-item value="none">None</igc-select-item>
            </igc-select>
          </div>
          <div class="action">
            <igc-switch label-position="before">Vertical alignment</igc-switch>
          </div>
        </div>
        <igc-carousel hide-indicators>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ignite UI for Angular</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>30+ Material-based Angular components to code speedy web apps faster.</p>
                </igc-card-content> 
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide1-angular.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ignite UI for Javascript</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>A complete JavaScript UI library empowering you to build data-rich responsive web apps.</p>
                </igc-card-content>
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide2-ignite.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/ignite-ui" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
          <igc-carousel-slide>
            <div class="slide-wrapper">
              <igc-card>
                <igc-card-header>
                  <h3 slot="title">Ultimate UI for ASP.NET</h3>
                </igc-card-header>
                <igc-card-content>
                  <p>Build full-featured business apps with the most versatile set of ASP.NET AJAX UI controls.</p>
                </igc-card-content>
                <igc-card-media>
                  <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide3-aspnet.png">
                </igc-card-media>
                <igc-card-actions>
                  <igc-button slot="start" href="https://www.infragistics.com/products/aspnet" target="_blank" rel="noopener">
                    Visit Page
                  </igc-button>
                </igc-card-actions>
              </igc-card>
            </div>
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.carousel-wrapper {
    height: 600px;
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.action-wrapper {
    height: 40px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.action {
    display: flex;
    align-items: center;
}

.slide-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

igc-carousel {
    border: 0.5px solid #dde0e4;
}

igc-select {
    width: 150px;
    margin-left: 10px;
    --ig-size: var(--ig-size-small);
}

igc-card {
    border: none;
}

igc-card-header {
    padding: 8px 16px;
}css

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

自動的なトランジション

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

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

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

高度な例

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

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

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

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

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

defineComponents(IgcCarouselComponent);

export class CarouselThumbnail {
    constructor() {}
}

new CarouselThumbnail();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Carousel Thumbnail</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-carousel
          disable-pause-on-interaction
          hide-navigation
          interval="2000"
          vertical
          animation-type="fade"
        >
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoastThumb.png"
              alt="Wonderful Coast Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoastThumb.png"
              alt="Wonderful Coast Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDipThumb.png"
              alt="Cultural Dip Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDipThumb.png"
              alt="Cultural Dip Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeachesThumb.png"
              alt="Golden Beaches Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeachesThumb.png"
              alt="Golden Beaches Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistoryThumb.png"
              alt="Island Of History Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistoryThumb.png"
              alt="Island Of History Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
          <igc-carousel-indicator>
            <img
              class="blurred"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridgeThumb.png"
              alt="Amazing Bridge Thumb"
              width="50"
              height="60"
            />
            <img
              slot="active"
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridgeThumb.png"
              alt="Amazing Bridge Thumb Active"
              width="50"
              height="60"
            />
          </igc-carousel-indicator>
        
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoast.png"
              alt="Wonderful Coast"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDip.png"
              alt="Cultural Dip"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeaches.png"
              alt="Golden Beaches"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistory.png"
              alt="Island Of History"
            />
          </igc-carousel-slide>
          <igc-carousel-slide>
            <img
              src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridge.png"
              alt="Amazing Bridge"
            />
          </igc-carousel-slide>
        </igc-carousel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-carousel {
    margin-inline: auto;
    max-width: 75%;
}

igc-carousel::part(indicators) {
    border-radius: 2px;
}

.blurred {
    filter: blur(2px);
    opacity: 0.5;
}css

ユーザー補助

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

その他のリソース

カスタムインジケーター

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

タッチジェスチャー

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