syncfusion-aspnetcore-carousel

Syncfusion ASP.NET Core Carousel コンポーネントの実装

Carousel コンポーネントは、自動切り替え、タッチ／マウスによるスワイプ、カスタマイズ可能なアニメーション、さまざまなインジケーターのスタイルに対応したスライドを表示します。画像ギャラリー、コンテンツローテーター、推薦文の表示など、コンテンツを順番に提示する必要があるあらゆる場面に最適です。

このスキルを使用する場面

次のような場合に、このスキルを使用します。

• 画像カルーセルやギャラリーを作成する – ユーザーが閲覧できる複数の画像やコンテンツ項目を表示します
• スライドの自動切り替えを実装する – 間隔やアニメーションを設定して、コンテンツをローテーション表示します
• ナビゲーションコントロールを追加する – 前へ／次へボタンや操作可能なインジケーターで、手動での移動を可能にします
• スライド変更イベントを処理する – スライドが切り替わったタイミングを追跡し、独自のロジックで応答します
• タッチ操作とマウス操作に対応する – モバイルではスワイプジェスチャー、デスクトップではマウスドラッグを有効にします
• アニメーション効果をカスタマイズする – 切り替え時にフェード、スライド、またはカスタム CSS アニメーションを適用します
• パフォーマンスを最適化する – 最新の WebP 形式で画像を読み込み、カルーセルの状態の永続化を管理します
• アクセシブルなスライドショーを構築する – キーボードナビゲーションと適切な ARIA サポートを実装します

コンポーネントの概要

Carousel コンポーネントは、次の要素で構成されます。

• Carousel コンテナー（<ejs-carousel>）– コンポーネントのメインラッパー
• Carousel アイテム（<e-carousel-item>）– 個々のスライド要素
• ナビゲーションボタン – カスタマイズ可能なテンプレートを使用した前へ／次へコントロール
• インジケーター – 現在の位置を示す視覚的なインジケーター（ドット、ダイナミック、分数、プログレス）
• 再生／一時停止コントロール – オプションの再生コントロール UI
• イベントシステム – 独自のロジックに使用する、スライド変更前および変更後のイベント

主な概念

• 自動再生 – 指定した間隔でスライドを自動的に切り替えます
• ループ – 最後のスライドから最初のスライドに戻り、連続して循環できるようにします
• アニメーション効果 – 組み込みの Slide および Fade 効果に加えて、カスタム CSS アニメーションにも対応します
• 部分表示スライド – アクティブなスライドの横に、隣接するスライドのプレビューを表示します
• スワイプモード – タッチとマウスによるスワイプ操作を個別に制御します
• アイテムテンプレート – アイテムごとに個別のテンプレート、またはすべてのアイテムに共通のテンプレートを使用します
• データバインディング – データソース、または宣言的なアイテムマークアップからカルーセルにデータを設定します

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージ（Syncfusion.EJ2.AspNet.Core）をインストールする
• _ViewImports.cshtml に Tag Helper を登録する
• スタイルシートとスクリプトのリソース（CDN またはローカル）を追加する
• テンプレートアイテムを使用して、最初の基本的なカルーセルを作成する
• レンダリングと初期設定を確認する

アイテムの追加とデータバインディング

📄 参照： references/populating-items.md

• カルーセルアイテムのマークアップ（<e-carousel-item>）を使用してアイテムを追加する
• itemTemplate を使用したデータソースバインディングでアイテムを追加する
• selectedIndex を設定して、特定のスライドから開始する
• 隣接するスライドのプレビューを表示して、部分表示スライドを有効にする
• アイテムごとのテンプレート、または間隔をカスタマイズする

アニメーションと切り替え

📄 参照： references/animations-transitions.md

• アニメーション効果を設定する（None、Slide、Fade、Custom）
• スライドの切り替え間隔を設定する（ミリ秒）
• 自動再生とホバー時の一時停止動作を有効／無効にする
• スライドの末尾でのループ動作を制御する
• タッチスワイプを無効にし、スワイプモードを設定する
• スライド変更前および変更後のイベントを処理する

ナビゲーションコントロールとインジケーター

📄 参照： references/navigation-indicators.md

• ナビゲーションボタンを表示／非表示にする（Hidden、Visible、VisibleOnHover）
• ナビゲーションボタンのテンプレートをカスタマイズする
• インジケーターの種類を設定する（Default、Dynamic、Fraction、Progress）
• インジケーターのテンプレートとプレビューをカスタマイズする
• 再生／一時停止ボタンのコントロールを有効／無効にする
• 再生ボタンのテンプレートをカスタマイズする

パフォーマンスと最適化

📄 参照： references/optimization.md

• パフォーマンス向上のため、画像を WebP 形式で読み込みます
• ページの再読み込み後も状態を保持できるようにします
• 右から左に記述する言語向けに RTL レンダリングを設定します
• CSS クラスのカスタマイズを適用します
• 大規模なデータセット向けにデータソースのバインドを最適化します

API リファレンス

📄 参照： references/api-reference.md

• 説明と型を含むプロパティの完全なリファレンス
• イベント引数とイベント処理のパターン
• 列挙型と使用可能な値
• TagHelper 属性のマッピング
• HTML 属性のサポート

クイックスタートの例

<div class="carousel-container">
    <ejs-carousel id="basicCarousel" 
                   autoPlay="true" 
                   animationEffect="Slide"
                   buttonsVisibility="Visible"
                   showIndicators="true">
        <e-carousel-items>
            <e-carousel-item template="#slide1"></e-carousel-item>
            <e-carousel-item template="#slide2"></e-carousel-item>
            <e-carousel-item template="#slide3"></e-carousel-item>
        </e-carousel-items>
    </ejs-carousel>
</div>

<script id="slide1" type="text/x-template">
    <img src="/images/slide1.jpg" alt="Slide 1" style="height: 100%; width: 100%;" />
</script>

<script id="slide2" type="text/x-template">
    <img src="/images/slide2.jpg" alt="Slide 2" style="height: 100%; width: 100%;" />
</script>

<script id="slide3" type="text/x-template">
    <img src="/images/slide3.jpg" alt="Slide 3" style="height: 100%; width: 100%;" />
</script>

<style>
.carousel-container {
    max-width: 600px;
    height: 400px;
    margin: 20px auto;
}
</style>

一般的な実装パターン

パターン 1：自動再生付き画像ギャラリー

スライドを順に切り替え、ユーザーがホバーすると一時停止する自動画像カルーセルを作成します。

<ejs-carousel id="photoGallery" 
              autoPlay="true" 
              pauseOnHover="true"
              interval="3000">
    <e-carousel-items>
        <e-carousel-item template="#photo1"></e-carousel-item>
        <e-carousel-item template="#photo2"></e-carousel-item>
    </e-carousel-items>
</ejs-carousel>

パターン 2：カスタムインジケーターによる手動ナビゲーション

手動ナビゲーションとカスタムのインジケータースタイルを備えたカルーセルを作成します。

<ejs-carousel id="manualCarousel" 
              autoPlay="false"
              buttonsVisibility="Visible"
              showIndicators="true"
              indicatorsType="Fraction">
    <e-carousel-items>
        <e-carousel-item template="#item1"></e-carousel-item>
        <e-carousel-item template="#item2"></e-carousel-item>
    </e-carousel-items>
</ejs-carousel>

パターン 3：データバインドされたカルーセル

均一なテンプレートを使って、データソースからカルーセルにデータを設定します。

<ejs-carousel id="dataCarousel" 
              dataSource="@Model.Slides"
              itemTemplate="#itemTemplate">
</ejs-carousel>

<script id="itemTemplate" type="text/x-template">
    <div class="slide-content">
        <img src="${image}" alt="${title}" style="height: 100%; width: 100%;" />
        <h3>${title}</h3>
    </div>
</script>

パターン 4：イベント駆動型のスライド追跡

スライドの切り替えを処理し、ユーザーの操作を追跡します。

<ejs-carousel id="trackedCarousel" 
              slideChanging="onSlideChanging"
              slideChanged="onSlideChanged">
    <e-carousel-items>
        <e-carousel-item template="#slide1"></e-carousel-item>
    </e-carousel-items>
</ejs-carousel>

<script>
function onSlideChanging(args) {
    console.log('Moving from slide ' + args.currentIndex + ' to ' + args.nextIndex);
}

function onSlideChanged(args) {
    console.log('Now on slide ' + args.currentIndex);
}
</script>

主なプロパティ

プロパティ	型	目的	一般的な値
autoPlay	boolean	スライドの自動切り替えを有効にします	true, false
interval	number	自動切り替えの間隔（ミリ秒）	5000, 3000
animationEffect	enum	切り替えアニメーションの種類	Slide, Fade, None, Custom
buttonsVisibility	enum	ナビゲーションボタンの表示設定	Visible, Hidden, VisibleOnHover
showIndicators	boolean	スライド位置インジケーターを表示します	true, false
indicatorsType	enum	インジケーターのスタイル	Default, Dynamic, Fraction, Progress
loop	boolean	最後のスライドから最初のスライドへ循環します	true, false
pauseOnHover	boolean	ホバー時に自動再生を一時停止します	true, false
enableTouchSwipe	boolean	タッチデバイスでのスワイプを有効にします	true, false
selectedIndex	number	初期スライドのインデックス	0, 1, 2...
partialVisible	boolean	隣接するスライドのプレビューを表示します	true, false

一般的なユースケース

• EC 商品の紹介 – ナビゲーション付きで商品画像を表示します
• ブログまたはポートフォリオのギャラリー – プロジェクトや記事を順番に紹介します
• お客様の声カルーセル – お客様の声を自動で切り替えます
• 広告／プロモーション – プロモーションバナーを切り替えます
• ヒーローセクション – ランディングページに全幅のコンテンツを切り替えて表示します
• ニュース／更新情報フィード – 最新ニュースをカルーセルで切り替えて表示します
• ソーシャルメディアフィード – 画像投稿をカルーセル形式で表示します

ブラウザーのサポート

Carousel コンポーネントは、すべての最新ブラウザーで動作します。

• Chrome/Edge（最新）
• Firefox（最新）
• Safari（最新）
• モバイルブラウザー（iOS Safari、Chrome Android）

パフォーマンスのヒント

• パフォーマンス向上のため、WebP 画像を使用します
• CPU 使用率を抑えるため、適切な interval 値を設定します
• 不要な場合は自動再生を無効にします
• レンダリングの負荷を軽減するため、partialVisible: false を使用します
• 大規模なギャラリーでは画像の遅延読み込みを検討します

次のステップ

1. 環境をセットアップするには、はじめにから始めます
2. 上記のパターンからユースケースを選択します
3. 使用する機能に関連するリファレンスセクションを確認します
4. プロパティの詳細については、API リファレンスを確認します
5. 必要に応じてイベントを処理します

---

さらにサポートが必要ですか？ 詳しい例や高度な設定については、各リファレンスファイルをご確認ください。