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

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

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

Blazor Carousel の例

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbCarouselModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
.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: 400px;
}

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

<div class="carousel-container">
  <IgbCarousel>
    <IgbCarouselSlide>
      <div class="image-container">
        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-indigo-design.png" />
      </div>
    </IgbCarouselSlide>
    <IgbCarouselSlide>
      <div class="image-container">
        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slider-image-chart.png" />
      </div>
    </IgbCarouselSlide>
    <IgbCarouselSlide >
      <div class="image-container">
        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-charts.png" />
      </div>
    </IgbCarouselSlide>
  </IgbCarousel>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

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

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

使用方法

IgbCarousel を使用する前に、次のように登録する必要があります:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule));
razor

スタイルを IgbCarousel コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor

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

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

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

<IgbCarousel>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/slider-image-chart.png" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/ignite-ui-angular-charts.png" />
    </IgbCarouselSlide>
</IgbCarousel>
razor

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

<IgbCarousel>
    ...
    <IgbCarouselSlide>
        ...
    </IgbCarouselSlide>
    <IgbCarouselSlide Active="true">
        ...
    </IgbCarouselSlide>
</IgbCarousel>
razor

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

例

カルーセルの構成

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

<IgbCarousel DisableLoop="true">
    ...
</IgbCarousel>
razor

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

<IgbCarousel IndicatorsOrientation="@CarouselIndicatorsOrientation.Start">
    ...
</IgbCarousel>
razor

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

<IgbCarousel HideNavigation="true" HideIndicators="true">
    ...
</IgbCarousel>
razor

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

<IgbCarousel Vertical="true">
    ...
</IgbCarousel>
razor

カスタム インジケーター

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

<IgbCarousel>
    <IgbCarouselIndicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <span>🤍</span>
        <span slot="active">❤️</span>
    </IgbCarouselIndicator>

    <IgbCarouselSlide>
        <img src="assets/images/card/media/the_red_ice_forest.jpg"/>
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/card/media/yosemite.jpg"/>
    </IgbCarouselSlide>
</IgbCarousel>
razor

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

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

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

<IgbCarousel>
    <IgbIcon slot="previous-button" IconName="previous" Collection="material"></IgbIcon>
    <IgbIcon slot="next-button" IconName="next" Collection="material"></IgbIcon>
    ...
</IgbCarousel>
razor

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

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

<IgbCarousel>
    <IgbCarouselSlide>
        <div>
            <img src="assets/images/svg/carousel/SignUp.svg">
            <form>
                <IgbInput DisplayType="@InputType.Text" Placeholder="Username">
                    <IgbIcon slot="prefix" IconName="person" Collection="material" @ref="iconRef"></IgbIcon>
                </IgbInput>
                <IgbInput DisplayType="@InputType.Password" Placeholder="Password">
                    <IgbIcon slot="prefix" IconName="password" Collection="material"></IgbIcon>
                </IgbInput>
                <IgbButton DisplayType="@ButtonBaseType.Reset">Sign In</IgbButton>
            </form>
        </div>
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <div>
            <img src="assets/images/svg/carousel/Route.svg">
            <form>
                <IgbInput DisplayType="@InputType.Text" Placeholder="Search">
                    <IgbIcon slot="prefix" IconName="search" Collection="material"></IgbIcon>
                </IgbInput>
                <IgbButton DisplayType="@ButtonBaseType.Reset">Search</IgbButton>
            </form>
        </div>
    </IgbCarouselSlide>
</IgbCarousel>
razor

サンプル

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbCarouselModule),
                typeof(IgbInputModule),
                typeof(IgbIconModule),
                typeof(IgbButtonModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
.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;
}
</style>

<div class="carousel-container">
    <IgbCarousel>
        <IgbCarouselSlide>
            <div>
                <img src="https://www.infragistics.com/angular-demos-lob/assets/images/svg/carousel/SignUp.svg">
                <form >
                    <IgbInput DisplayType="@InputType.Text" Placeholder="Username">
                        <IgbIcon slot="prefix" IconName="person" Collection="material" @ref="iconRef"></IgbIcon>
                    </IgbInput>
                    <IgbInput DisplayType="@InputType.Password" Placeholder="Password">
                        <IgbIcon slot="prefix" IconName="password" Collection="material"></IgbIcon>
                    </IgbInput>
                    <IgbButton DisplayType="@ButtonBaseType.Reset">Sign In</IgbButton>
                </form >
            </div>
        </IgbCarouselSlide>
        <IgbCarouselSlide>
            <div>
                <img src="https://www.infragistics.com/angular-demos-lob/assets/images/svg/carousel/Route.svg">
                <form >
                    <IgbInput DisplayType="@InputType.Text" Placeholder="Search">
                        <IgbIcon slot="prefix" IconName="search" Collection="material"></IgbIcon>
                    </IgbInput>
                    <IgbButton DisplayType="@ButtonBaseType.Reset">Search</IgbButton>
                </form >
            </div>
        </IgbCarouselSlide>
    </IgbCarousel>
</div>

@code {
    

    private string person = "<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>";
    private string password = "<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>";
    private string search = "<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>";

    private IgbIcon iconRef;

    protected override void OnAfterRender(bool firstRender)
    {
        if (this.iconRef != null && firstRender)
        {
            this.iconRef.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.iconRef.RegisterIconFromText("person", person, "material"); ;
                this.iconRef.RegisterIconFromText("password", password, "material"); ;
                this.iconRef.RegisterIconFromText("search", search, "material"); ;
            }));
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

アニメーション

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

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

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

<IgbCarousel AnimationType="@CarouselAnimationType.Fade">
    ...
</IgbCarousel>
razor

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

サンプル

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbCarouselModule),
                typeof(IgbButtonModule),
                typeof(IgbCardModule),
                typeof(IgbSwitchModule),
                typeof(IgbSelectModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
.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;
}
</style>

<div class="carousel-wrapper">
    <div class="action-wrapper">
        <div class="action">
            <span>Animation type</span>
            <IgbSelect Change="OnSelectChange">
                <IgbSelectItem Value="slide" Selected="true">Slide</IgbSelectItem>
                <IgbSelectItem Value="fade">Fade</IgbSelectItem>
                <IgbSelectItem Value="none">None</IgbSelectItem>
            </IgbSelect>
        </div>
        <div class="action">
            <IgbSwitch Change="OnSwitchChange" LabelPosition="@CheckboxBaseLabelPosition.Before">Vertical alignment</IgbSwitch>
        </div>
    </div>
    <IgbCarousel @ref="carouselRef" HideIndicators="true">
        <IgbCarouselSlide>
            <div class="slide-wrapper">
                <IgbCard>
                    <IgbCardHeader>
                        <h3 slot="title">Ignite UI for Angular</h3>
                    </IgbCardHeader>
                    <IgbCardContent>
                        <p>30 + Material-based Angular components to code speedy web apps faster.</p>
                    </IgbCardContent>
                    <IgbCardMedia>
                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide1-angular.png">
                    </IgbCardMedia>
                    <IgbCardActions>
                        <IgbButton slot="start" href="https://www.infragistics.com/products/ignite-ui-angular" Target="@ButtonBaseTarget._blank" Rel="noopener">
                            Visit Page
                        </IgbButton>
                    </IgbCardActions>
                </IgbCard>
            </div>
        </IgbCarouselSlide>
        <IgbCarouselSlide>
            <div class="slide-wrapper">
                <IgbCard>
                    <IgbCardHeader>
                        <h3 slot="title">Ignite UI for Javascript</h3>
                    </IgbCardHeader>
                    <IgbCardContent>
                        <p>A complete JavaScript UI library empowering you to build data-rich responsive web apps.</p>
                    </IgbCardContent>
                    <IgbCardMedia>
                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide2-ignite.png">
                    </IgbCardMedia>
                    <IgbCardActions>
                        <IgbButton slot="start" href="https://www.infragistics.com/products/ignite-ui" Target="@ButtonBaseTarget._blank" Rel="noopener">
                            Visit Page
                        </IgbButton>
                    </IgbCardActions>
                </IgbCard>
            </div>
        </IgbCarouselSlide>
        <IgbCarouselSlide>
            <div class="slide-wrapper">
                <IgbCard>
                    <IgbCardHeader>
                        <h3 slot="title">Ultimate UI for ASP.NET</h3>
                    </IgbCardHeader>
                    <IgbCardContent>
                        <p>Build full-featured business apps with the most versatile set of ASP.NET AJAX UI controls.</p>
                    </IgbCardContent>
                    <IgbCardMedia>
                        <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide3-aspnet.png">
                    </IgbCardMedia>
                    <IgbCardActions>
                        <IgbButton slot="start" href="https://www.infragistics.com/products/aspnet" Target="@ButtonBaseTarget._blank" Rel="noopener">
                            Visit Page
                        </IgbButton>
                    </IgbCardActions>
                </IgbCard>
            </div>
        </IgbCarouselSlide>
    </IgbCarousel>
</div>

@code {
    

    private IgbCarousel carouselRef;

    private void OnSelectChange(IgbSelectItemComponentEventArgs args)
    {
        switch (args.Detail.Value)
        {
            case "slide":
                this.carouselRef.AnimationType = CarouselAnimationType.Slide;
                break;
            case "fade":
                this.carouselRef.AnimationType = CarouselAnimationType.Fade;
                break;
            default:
                this.carouselRef.AnimationType = CarouselAnimationType.None;
                break;
        }
    }

    private void OnSwitchChange(IgbCheckboxChangeEventArgs args)
    {
        this.carouselRef.Vertical = args.Detail.Checked;
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

ナビゲーション

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

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

タッチ ジェスチャー

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

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

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

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

自動的なトランジション

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

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

<IgbCarousel Interval="2000" DisablePauseOnInteraction="true">
    ...
</IgbCarousel>
razor

高度な例

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

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

• DisablePauseOnInteraction プロパティを有効にします。
• HideNavigation プロパティを有効にします。
• Vertical プロパティを有効にします。
• トランジション Interval を追加します。
• 各スライドにカスタム IgbCarouselIndicator を追加します。

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

<IgbCarousel DisablePauseOnInteraction="true"
             HideNavigation="true"
             Interval="2000"
             Vertical="true"
             AnimationType="@CarouselAnimationType.Fade">
    <IgbCarouselIndicator>
        <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" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <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" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <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" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <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" />
    </IgbCarouselIndicator>
    <IgbCarouselIndicator>
        <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" />
    </IgbCarouselIndicator>

    <IgbCarouselSlide>
        <img src="assets/images/carousel/WonderfulCoast.png" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/CulturalDip.png" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/GoldenBeaches.png" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/IslandOfHistory.png" />
    </IgbCarouselSlide>
    <IgbCarouselSlide>
        <img src="assets/images/carousel/AmazingBridge.png" />
    </IgbCarouselSlide>
</IgbCarousel>
razor

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbCarouselModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
igc-carousel {
margin-inline: auto;
max-width: 75%;
}

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

.blurred {
filter: blur(2px);
opacity: 0.5;
}
</style>

<div class="container sample">
    <IgbCarousel DisablePauseOnInteraction="true"
                 HideNavigation="true"
                 Interval="2000"
                 Vertical="true"
                 AnimationType="@CarouselAnimationType.Fade">
        <IgbCarouselIndicator>
            <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" />
        </IgbCarouselIndicator>
        <IgbCarouselIndicator>
            <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" />
        </IgbCarouselIndicator>
        <IgbCarouselIndicator>
            <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" />
        </IgbCarouselIndicator>
        <IgbCarouselIndicator>
            <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" />
        </IgbCarouselIndicator>
        <IgbCarouselIndicator>
            <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" />
        </IgbCarouselIndicator>

        <IgbCarouselSlide>
            <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoast.png"
                 alt="Wonderful Coast" />
        </IgbCarouselSlide>
        <IgbCarouselSlide>
            <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDip.png"
                 alt="Cultural Dip" />
        </IgbCarouselSlide>
        <IgbCarouselSlide>
            <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeaches.png"
                 alt="Golden Beaches" />
        </IgbCarouselSlide>
        <IgbCarouselSlide>
            <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistory.png"
                 alt="Island Of History" />
        </IgbCarouselSlide>
        <IgbCarouselSlide>
            <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridge.png"
                 alt="Amazing Bridge" />
        </IgbCarouselSlide>
    </IgbCarousel>
</div>

@code {
    
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/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 に設定します。

API リファレンス

• IgbCarousel
• IgbCarouselSlide
• IgbCarouselIndicator
• IgbIcon
• IgbInput
• IgbButton

その他のリソース

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