syncfusion-angular-carousel

Name: syncfusion-angular-carousel
Author: syncfusion

github.com/syncfusionデザイン・UI0263 回インストール1 週間前に更新

リポジトリ

syncfusion-angular-carousel について

画像、商品、その他のコンテンツをスライド表示する Syncfusion Carousel を Angular で使うためのスキルです。自動再生、タッチ・キーボード操作、インジケーター、テンプレート、状態の永続化を設定できます。

主な機能

01複数の切り替え効果による自動再生
02ナビゲーションボタンとインジケーターの設定
03タッチスワイプとキーボード操作への対応
04テンプレートによる項目と操作部のカスタマイズ
05RTL と状態の永続化に対応

活用シーン

01スワイプ可能な画像ギャラリーの作成
02商品や注目コンテンツの切り替え表示
03自動スライド付きバナーの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-carousel

インストール後、Claude Code で/syncfusion-angular-carouselを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

animations-and-transitions.md

getting-started.md

item-templates-and-content.md

navigation-and-indicators.md

styling-and-appearance.md

詳細

Syncfusion Angular Carousel コンポーネントの実装

このスキルを使用するタイミング

次のような場合は、Syncfusion Angular Carousel コンポーネントを使用します。

複数の項目を順番に表示する – 画像、製品、コンテンツをスライドショー形式で表示します
画像ギャラリーを作成する – 自動または手動でナビゲーションできるレスポンシブなフォトギャラリーを構築します
コンテンツをローテーション表示する – 注目の記事、製品のハイライト、プロモーションバナーを表示します
スクロールのようなナビゲーションを実装する – コンテンツを閲覧するための次へ／前へコントロールを提供します
アニメーションとトランジションを追加する – フェードやスライドアニメーションで視覚的に魅力的なスライド効果を作成します
タッチ操作に対応する – モバイル端末やタッチデバイスでスワイプジェスチャーを有効にします
進行状況インジケーターを表示する – カルーセル内での現在位置をユーザーに示します（ドット、分数、プログレスバー）
スライド変更イベントを処理する – スライドの切り替え時にカスタムロジックを実行します

コンポーネントの概要

Syncfusion Angular Carousel コンポーネントを使用すると、画像をコンテンツ、リンク、その他のメディアとともにスライドショー形式で表示できます。次の機能を備えています。

複数のインジケータータイプ – 標準のドット、動的マーカー、分数、プログレスバー
組み込みアニメーション – なし、Slide、Fade、およびカスタムアニメーションに対応
ナビゲーションコントロール – 表示オプション（Visible、Hidden、VisibleOnHover）付きの前へ／次へボタン
タッチ対応 – モバイルやデスクトップでのナビゲーションに使えるスワイプジェスチャー
自動再生機能 – 間隔を設定できる自動スライド切り替え
キーボードアクセシビリティ – 矢印キーによるナビゲーションと WAI-ARIA への準拠
テンプレート対応 – カスタム項目のレンダリング、ボタンテンプレート、インジケーターのカスタマイズ
イベント処理 – カスタムロジックに利用できるスライド切り替えの前後イベント（slideChanging、slideChanged）
状態の保持 – ページの再読み込みをまたいでカルーセルの状態を保存／復元
RTL 対応 – アラビア語、ヘブライ語などの RTL 言語向けの右から左へのレイアウト

クイックスタートの例

スライドを自動で切り替える基本的なカルーセルです。

import { Component } from "@angular/core";
import { CarouselModule } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel",
  standalone: true,
  imports: [CarouselModule],
  template: `
    <div class="carousel-container">
      <ejs-carousel [autoPlay]="true" [animationEffect]="'Slide'">
        <e-carousel-items>
          <e-carousel-item>
            <ng-template #template>
              <figure class="img-container">
                <img src="https://ej2.syncfusion.com/products/images/carousel/cardinal.png" alt="Slide 1" />
                <figcaption>Cardinal</figcaption>
              </figure>
            </ng-template>
          </e-carousel-item>
          <e-carousel-item>
            <ng-template #template>
              <figure class="img-container">
                <img src="https://ej2.syncfusion.com/products/images/carousel/hunei.png" alt="Slide 2" />
                <figcaption>Kingfisher</figcaption>
              </figure>
            </ng-template>
          </e-carousel-item>
          <e-carousel-item>
            <ng-template #template>
              <figure class="img-container">
                <img src="https://ej2.syncfusion.com/products/images/carousel/costa-rica.png" alt="Slide 3" />
                <figcaption>Keel-billed Toucan</figcaption>
              </figure>
            </ng-template>
          </e-carousel-item>
        </e-carousel-items>
      </ejs-carousel>
    </div>
  `,
  styles: [`
    .carousel-container {
      height: 400px;
      margin: 20px 0;
    }
  `]
})
export class CarouselComponent {}

主な結果： スライドアニメーションで、カルーセルが 5000ms ごとにスライドを自動で切り替えます。

コンポーネントのプロパティ

カテゴリ別に整理された全 30 個のプロパティ

1. アニメーションの基本プロパティ

animationEffect

型： 'None' | 'Slide' | 'Fade' | 'Custom'
既定値： 'Slide'
説明： スライドの切り替え時に使用するアニメーション効果を指定します。

// Fade animation
<ejs-carousel [animationEffect]="'Fade'">
  
</ejs-carousel>

// No animation
<ejs-carousel [animationEffect]="'None'">
  
</ejs-carousel>

// Custom CSS animation
<ejs-carousel [animationEffect]="'Custom'" [cssClass]="'custom-animation'">
  
</ejs-carousel>

2. 自動再生のプロパティ

autoPlay

型： boolean
既定値： true
説明： カルーセルの項目を一定間隔で自動的にスライドさせます。

<ejs-carousel [autoPlay]="true" [interval]="3000">
  
</ejs-carousel>

interval

型： number
既定値： 5000（ミリ秒）
説明： 自動スライド切り替えの間隔（ミリ秒）です。autoPlay が true の場合にのみ適用されます。

<ejs-carousel [autoPlay]="true" [interval]="2000">
  
</ejs-carousel>

pauseOnHover

型： boolean
既定値： true
説明： マウスがカルーセルの上にあるとき、自動再生を一時停止します。

<ejs-carousel [autoPlay]="true" [pauseOnHover]="false">
  
</ejs-carousel>

3. ナビゲーションのプロパティ

buttonsVisibility

型： 'Visible' | 'Hidden' | 'VisibleOnHover'
既定値： 'Visible'
説明： 前へ／次へナビゲーションボタンの表示状態を制御します。

// Always visible
<ejs-carousel [buttonsVisibility]="'Visible'">
  
</ejs-carousel>

// Only on hover
<ejs-carousel [buttonsVisibility]="'VisibleOnHover'">
  
</ejs-carousel>

// Never visible
<ejs-carousel [buttonsVisibility]="'Hidden'">
  
</ejs-carousel>

previousButtonTemplate

型： string | object
既定値： null
説明： 前へナビゲーションボタンのカスタムテンプレートです。

<ejs-carousel [previousButtonTemplate]="'#prevBtnTemplate'">
  <ng-template #prevBtnTemplate>
    <button class="custom-prev"><i class="icon-left"></i> Back</button>
  </ng-template>
  <e-carousel-items></e-carousel-items>
</ejs-carousel>

nextButtonTemplate

型： string | object
既定値： null
説明： 次へナビゲーションボタンのカスタムテンプレートです。

<ejs-carousel [nextButtonTemplate]="'#nextBtnTemplate'">
  <ng-template #nextBtnTemplate>
    <button class="custom-next">Next <i class="icon-right"></i></button>
  </ng-template>
  <e-carousel-items></e-carousel-items>
</ejs-carousel>

loop

型： boolean
既定値： true
説明： 無限ループを有効にします。最後のスライドの後に最初のスライドへ戻ります。

<ejs-carousel [loop]="true">
  
</ejs-carousel>

<ejs-carousel [loop]="false">
  
</ejs-carousel>

selectedIndex

型： number
既定値： 0
説明： 最初に表示するスライドのインデックス（0 始まり）です。

<ejs-carousel [selectedIndex]="2">
  
</ejs-carousel>

4. インジケーターのプロパティ

showIndicators

Type: boolean
Default: true
Description: 位置インジケーターを表示または非表示にします。

<ejs-carousel [showIndicators]="true">
  
</ejs-carousel>

<ejs-carousel [showIndicators]="false">
  
</ejs-carousel>

indicatorsType

Type: 'Default' | 'Dynamic' | 'Fraction' | 'Progress'
Default: 'Default'
Description: 表示するインジケーターのスタイルです。

// Dot indicators
<ejs-carousel [indicatorsType]="'Default'">
  
</ejs-carousel>

// Numeric format
<ejs-carousel [indicatorsType]="'Fraction'">
  
</ejs-carousel>

// Progress bar
<ejs-carousel [indicatorsType]="'Progress'">
  
</ejs-carousel>

// Animated
<ejs-carousel [indicatorsType]="'Dynamic'">
  
</ejs-carousel>

indicatorsTemplate

Type: string | object
Default: null
Description: インジケーターのカスタムテンプレートです（サムネイルプレビューなど）。

<ejs-carousel [indicatorsTemplate]="'#indicatorTemplate'" [showIndicators]="true">
  <ng-template #indicatorTemplate let-data let-index="index">
    <img [src]="items[index]?.thumbnail" class="thumb" />
  </ng-template>
  <e-carousel-items></e-carousel-items>
</ejs-carousel>

showPlayButton

Type: boolean
Default: true
Description: 自動再生を再開するための再生ボタンを表示または非表示にします。

<ejs-carousel [autoPlay]="false" [showPlayButton]="true">
  
</ejs-carousel>

<ejs-carousel [showPlayButton]="false">
  
</ejs-carousel>

playButtonTemplate

Type: string | object
Default: null
Description: 再生ボタンのカスタムテンプレートです。

<ejs-carousel [playButtonTemplate]="'#playBtnTemplate'">
  <ng-template #playBtnTemplate>
    <button class="play-btn">▶ Resume</button>
  </ng-template>
  <e-carousel-items></e-carousel-items>
</ejs-carousel>

5. データと項目のプロパティ

dataSource

Type: any[]
Default: null
Description: 動的なカルーセル項目のデータ配列です（itemTemplate と併用します）。

// Component
export class CarouselComponent {
  public slides = [
    { id: 1, image: 'img1.jpg', title: 'Slide 1' },
    { id: 2, image: 'img2.jpg', title: 'Slide 2' },
    { id: 3, image: 'img3.jpg', title: 'Slide 3' }
  ];
}

// Template
<ejs-carousel [dataSource]="slides">
  <ng-template #itemTemplate let-item>
    <figure>
      <img [src]="item.image" [alt]="item.title" />
      <figcaption>{{item.title}}</figcaption>
    </figure>
  </ng-template>
</ejs-carousel>

itemTemplate

Type: string | object
Default: null
Description: dataSource から各カルーセル項目を描画するためのテンプレートです。

<ejs-carousel [dataSource]="products">
  <ng-template #itemTemplate let-product>
    <div class="product-card">
      <img [src]="product.image" />
      <h3>{{product.name}}</h3>
      <p>${{product.price}}</p>
    </div>
  </ng-template>
</ejs-carousel>

items

Type: CarouselItem[]
Default: []
Description: カルーセル項目の配列です（静的コンテンツには e-carousel-item ディレクティブと併用します）。

<ejs-carousel>
  <e-carousel-items>
    <e-carousel-item>
      <ng-template #template><img src="image1.jpg" /></ng-template>
    </e-carousel-item>
    <e-carousel-item>
      <ng-template #template><img src="image2.jpg" /></ng-template>
    </e-carousel-item>
  </e-carousel-items>
</ejs-carousel>

cssClass

Type: string
Default: ''
Description: カルーセルコンテナーのスタイル設定に使用する CSS クラスです。

<ejs-carousel [cssClass]="'dark-theme full-width'">
  
</ejs-carousel>

6. インタラクションのプロパティ

enableTouchSwipe

Type: boolean
Default: true
Description: タッチデバイスでスワイプしてスライドを移動できるようにします。

<ejs-carousel [enableTouchSwipe]="true">
  
</ejs-carousel>

<ejs-carousel [enableTouchSwipe]="false">
  
</ejs-carousel>

swipeMode

Type: 'Touch' | 'Mouse' | 'Touch|Mouse'
Default: 'Touch|Mouse'
Description: スワイプを有効にするインタラクションの種類です。

// Both touch and mouse
<ejs-carousel [swipeMode]="'Touch|Mouse'" [enableTouchSwipe]="true">
  
</ejs-carousel>

// Touch only
<ejs-carousel [swipeMode]="'Touch'" [enableTouchSwipe]="true">
  
</ejs-carousel>

// Mouse only
<ejs-carousel [swipeMode]="'Mouse'" [enableTouchSwipe]="true">
  
</ejs-carousel>

allowKeyboardInteraction

Type: boolean
Default: true
Description: 矢印キーでカルーセルを移動できるようにします。

<ejs-carousel [allowKeyboardInteraction]="true">
  
</ejs-carousel>

<ejs-carousel [allowKeyboardInteraction]="false">
  
</ejs-carousel>

7. 寸法のプロパティ

height

Type: string | number
Default: '100%'
Description: カルーセルコンテナーの高さ（px、%、em など）です。

// Fixed height
<ejs-carousel [height]="400">
  
</ejs-carousel>

// Percentage
<ejs-carousel [height]="'100%'">
  
</ejs-carousel>

width

Type: string | number
Default: '100%'
Description: カルーセルコンテナーの幅（px、%、em など）です。

// Fixed width
<ejs-carousel [width]="800">
  
</ejs-carousel>

// Full width
<ejs-carousel [width]="'100%'">
  
</ejs-carousel>

partialVisible

Type: boolean
Default: false
Description: 周囲の状況が分かるよう、左右にスライドの一部を表示します。

<ejs-carousel [partialVisible]="true">
  
</ejs-carousel>

<ejs-carousel [partialVisible]="false">
  
</ejs-carousel>

8. ローカライズと永続化

locale

Type: string
Default: ''（ブラウザーのロケールを使用）
Description: カルーセルのロケール／言語です（aria-label やアクセシビリティテキストに反映されます）。

<ejs-carousel [locale]="'de-DE'">
  
</ejs-carousel>

<ejs-carousel [locale]="'fr-FR'">
  
</ejs-carousel>

enablePersistence

Type: boolean
Default: false
Description: カルーセルの状態を localStorage に保存します（ページの再読み込み時に復元されます）。

<ejs-carousel [enablePersistence]="true">
  
</ejs-carousel>

9. アクセシビリティのプロパティ

enableRtl

Type: boolean
Default: false
Description: RTL 言語向けに右から左へのレイアウトを有効にします。

<ejs-carousel [enableRtl]="true">
  
</ejs-carousel>

htmlAttributes

Type: Record<string, any>
Default: null
Description: カルーセルのルート要素に追加する HTML 属性です。

<ejs-carousel [htmlAttributes]="{ 'data-type': 'hero', 'aria-label': 'Hero Carousel' }">
  
</ejs-carousel>

コンポーネントのメソッド

メソッドの合計：5

1. next()

Signature: next(): void
Description: プログラムから次のスライドに移動します。

import { Component, ViewChild } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel-nav",
  template: `
    <button (click)="goNext()">Next</button>
    <ejs-carousel #carousel>
      <e-carousel-items>
        <e-carousel-item><ng-template #template><img src="img1.jpg" /></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img2.jpg" /></ng-template></e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class CarouselNavComponent {
  @ViewChild("carousel") carousel!: CarouselComponent;

  goNext() {
    this.carousel.next();
  }
}

2. prev()

Signature: prev(): void
Description: プログラムから前のスライドに移動します。

export class CarouselNavComponent {
  @ViewChild("carousel") carousel!: CarouselComponent;

  goPrev() {
    this.carousel.prev();
  }
}

3. play()

Signature: play(): void
Description: スライドの自動切り替えを再開します。

import { Component, ViewChild } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel-controls",
  template: `
    <button (click)="playSlides()">Play</button>
    <button (click)="pauseSlides()">Pause</button>
    <ejs-carousel #carousel [autoPlay]="false">
      <e-carousel-items>
        <e-carousel-item><ng-template #template><img src="img1.jpg" /></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img2.jpg" /></ng-template></e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class CarouselControlsComponent {
  @ViewChild("carousel") carousel!: CarouselComponent;

  playSlides() {
    this.carousel.play();
  }

  pauseSlides() {
    this.carousel.pause();
  }
}

4. pause()

Signature: pause(): void
Description: スライドの自動切り替えを一時停止します。

export class CarouselControlsComponent {
  @ViewChild("carousel") carousel!: CarouselComponent;

  pauseSlides() {
    this.carousel.pause();
  }
}

5. destroy()

Signature: destroy(): void
Description: カルーセルコンポーネントを破棄し、リソースを解放します。コンポーネントを削除する前に呼び出してください。

import { Component, ViewChild, OnDestroy } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel-cleanup",
  template: `
    <ejs-carousel #carousel>
      <e-carousel-items>
        <e-carousel-item><ng-template #template><img src="img1.jpg" /></ng-template></e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class CarouselCleanupComponent implements OnDestroy {
  @ViewChild("carousel") carousel!: CarouselComponent;

  ngOnDestroy() {
    // Cleanup when component destroyed
    this.carousel.destroy();
  }
}

コンポーネントのイベント

イベントの合計：2

1. slideChanging

イベント引数: SlideChangingEventArgs
説明: スライドの切り替え前に発生します（キャンセル可能です）。
主な用途: スライドの切り替えを検証またはキャンセルします

イベント引数:

cancel: boolean – true に設定すると、切り替えを防止します
currentIndex: number – 現在のスライドインデックス
currentSlide: HTMLElement – 現在のスライドの DOM 要素
nextIndex: number – 表示する次のスライドのインデックス
nextSlide: HTMLElement – 次のスライドの DOM 要素
isSwiped: boolean – スワイプによって発生したかどうか
slideDirection: 'Next' | 'Previous' – 切り替えの方向
name: string – イベント名（'slideChanging'）

import { Component, ViewChild } from "@angular/core";
import { CarouselComponent, SlideChangingEventArgs } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel-event",
  template: `
    <div class="status">Cannot navigate to slide 2</div>
    <ejs-carousel #carousel (slideChanging)="onSlideChanging($event)">
      <e-carousel-items>
        <e-carousel-item><ng-template #template><img src="img1.jpg" /><p>Slide 1</p></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img2.jpg" /><p>Slide 2 - BLOCKED</p></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img3.jpg" /><p>Slide 3</p></ng-template></e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class CarouselEventComponent {
  onSlideChanging(args: SlideChangingEventArgs) {
    console.log(`Transitioning from ${args.currentIndex} to ${args.nextIndex}`);
    
    // Prevent navigating to slide 2
    if (args.nextIndex === 1) {
      args.cancel = true;
      alert("Slide 2 is blocked");
    }
  }
}

2. slideChanged

イベント引数: SlideChangedEventArgs
説明: スライドの切り替え完了後に発生します。
主な用途: スライドの切り替えを追跡し、UI を更新し、分析データを記録します

イベント引数:

currentIndex: number – 現在のスライドインデックス
currentSlide: HTMLElement – 現在のスライドの DOM 要素
previousIndex: number – 前のスライドのインデックス
previousSlide: HTMLElement – 前のスライドの DOM 要素
isSwiped: boolean – スワイプによって発生したかどうか
slideDirection: 'Next' | 'Previous' – 切り替えの方向
name: string – イベント名（'slideChanged'）

import { Component, ViewChild } from "@angular/core";
import { CarouselComponent, SlideChangedEventArgs } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-carousel-tracking",
  template: `
    <div class="slide-counter">Slide {{currentSlide}} of {{totalSlides}}</div>
    <ejs-carousel #carousel (slideChanged)="onSlideChanged($event)">
      <e-carousel-items>
        <e-carousel-item><ng-template #template><img src="img1.jpg" /></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img2.jpg" /></ng-template></e-carousel-item>
        <e-carousel-item><ng-template #template><img src="img3.jpg" /></ng-template></e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class CarouselTrackingComponent {
  currentSlide = 1;
  totalSlides = 3;

  onSlideChanged(args: SlideChangedEventArgs) {
    this.currentSlide = args.currentIndex + 1;
    console.log(`Now on slide ${args.currentIndex}`);
    console.log(`Direction: ${args.slideDirection}`);
    console.log(`Swiped: ${args.isSwiped}`);
  }
}

デフォルト値リファレンス

30 個すべてのプロパティのデフォルト値一覧：

プロパティ	デフォルト値	型
allowKeyboardInteraction	true	boolean
animationEffect	'Slide'	string
autoPlay	true	boolean
buttonsVisibility	'Visible'	string
cssClass	''	string
dataSource	null	any[]
enablePersistence	false	boolean
enableRtl	false	boolean
enableTouchSwipe	true	boolean
height	'100%'	string/number
htmlAttributes	null	Record
indicatorsTemplate	null	string/object
indicatorsType	'Default'	string
interval	5000	number (ms)
itemTemplate	null	string/object
items	[]	CarouselItem[]
locale	''	string
loop	true	boolean
nextButtonTemplate	null	string/object
partialVisible	false	boolean
pauseOnHover	true	boolean
playButtonTemplate	null	string/object
previousButtonTemplate	null	string/object
selectedIndex	0	number
showIndicators	true	boolean
showPlayButton	true	boolean
swipeMode	'Touch\|Mouse'	string
width	'100%'	string/number

よくあるパターンとユースケース

パターン 1：動的コンテンツを含むデータバインドカルーセル

使用する場面: API または動的なデータソースからカルーセル項目を読み込む場合。

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "app-data-carousel",
  template: `
    <ejs-carousel [dataSource]="items" [selectedIndex]="0">
      <ng-template #itemTemplate let-item>
        <figure class="img-container">
          <img [src]="item.image" [alt]="item.title" />
          <figcaption>{{item.title}}</figcaption>
        </figure>
      </ng-template>
    </ejs-carousel>
  `
})
export class DataCarouselComponent implements OnInit {
  items: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any>('/api/carousel-items')
      .subscribe(data => this.items = data);
  }
}

パターン 2：ボタンによる手動ナビゲーション

使用する場面: 自動再生の代わりに、ユーザーがカスタムボタンでスライドの切り替えを操作する場合。

import { Component, ViewChild } from "@angular/core";
import { CarouselComponent } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-manual-nav",
  template: `
    <div class="carousel-controls">
      <button (click)="prevSlide()" class="control-btn">← Previous</button>
      <span class="slide-counter">{{currentSlide}} / {{totalSlides}}</span>
      <button (click)="nextSlide()" class="control-btn">Next →</button>
    </div>
    <ejs-carousel 
      #carousel 
      [autoPlay]="false" 
      [buttonsVisibility]="'Hidden'"
      (slideChanged)="onSlideChanged($event)"
    >
      <e-carousel-items>
        <e-carousel-item *ngFor="let item of items">
          <ng-template #template>
            <img [src]="item.image" />
          </ng-template>
        </e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class ManualNavCarouselComponent {
  @ViewChild("carousel") carousel!: CarouselComponent;
  
  items = [
    { image: 'image1.jpg' },
    { image: 'image2.jpg' },
    { image: 'image3.jpg' }
  ];
  
  currentSlide = 1;
  totalSlides = this.items.length;

  prevSlide() { this.carousel.prev(); }
  nextSlide() { this.carousel.next(); }

  onSlideChanged(event: any) {
    this.currentSlide = event.currentIndex + 1;
  }
}

パターン 3：カスタムハンドラーを使用したイベント駆動型カルーセル

使用する場面: スライドの切り替え時にカスタムロジックを実行する、分析データを追跡する、または特定の操作を防止する場合。

import { Component, ViewChild } from "@angular/core";
import { CarouselComponent, SlideChangingEventArgs, SlideChangedEventArgs } from "@syncfusion/ej2-angular-navigations";

@Component({
  selector: "app-event-carousel",
  template: `
    <div class="carousel-stats">
      <p>Total Views: {{viewCount}}</p>
      <p>Current: {{lastViewedSlide}}</p>
    </div>
    <ejs-carousel 
      #carousel 
      (slideChanging)="onSlideChanging($event)"
      (slideChanged)="onSlideChanged($event)"
    >
      <e-carousel-items>
        <e-carousel-item *ngFor="let item of slides">
          <ng-template #template>
            <img [src]="item.image" />
            <h3>{{item.title}}</h3>
          </ng-template>
        </e-carousel-item>
      </e-carousel-items>
    </ejs-carousel>
  `
})
export class EventCarouselComponent {
  @ViewChild("carousel") carousel!: CarouselComponent;

  slides = [
    { title: 'Slide 1', image: 'image1.jpg' },
    { title: 'Slide 2', image: 'image2.jpg' },
    { title: 'Slide 3', image: 'image3.jpg' }
  ];

  viewCount = 0;
  lastViewedSlide = '';

  onSlideChanging(args: SlideChangingEventArgs) {
    // Example: Prevent returning to first slide
    if (args.previousIndex === 1 && args.nextIndex === 0) {
      console.log("Blocking return to first slide");
      // args.cancel = true; // Uncomment to prevent
    }
  }

  onSlideChanged(args: SlideChangedEventArgs) {
    this.viewCount++;
    this.lastViewedSlide = this.slides[args.currentIndex].title;
    
    // Log analytics
    console.log(`Viewed slide ${args.currentIndex} via ${args.slideDirection}`);
  }
}

実装ガイド

特定のトピックに関する詳しい実装方法については、以下を参照してください。

はじめに – インストール、セットアップ、CSS のインポート、基本設定
項目の読み込みとデータ – dataSource、テンプレート、データバインディング、ナビゲーション
ナビゲーションとインジケーター – ボタンコントロール、インジケーターの種類、カスタマイズ
アニメーションとトランジション – アニメーション効果、自動再生、イベント処理
スタイルと外観 – CSS のカスタマイズ、テーマ、WebP、レスポンシブ対応

次のステップ

データの扱い方を選択する： 静的コンテンツには items バインディングを、動的データには dataSource を使用します
ナビゲーションスタイルを選択する： ボタン、インジケーター、またはその両方
アニメーションを決める： なし、スライド（デフォルト）、フェード、またはカスタム CSS エフェクト
自動再生を設定する： 間隔と一時停止の動作を設定します
イベントを処理する： カスタムロジックには slideChanging と slideChanged をリッスンします
カルーセルのスタイルを設定する： CSS クラスとレスポンシブデザインを適用します
操作をテストする： タッチ／キーボードによるナビゲーションとイベント処理を確認します

詳しい実装例とベストプラクティスについては、リファレンスファイルを参照してください。

Markdown 対応

ログインしてコメント

基本情報

作者: syncfusion
リポジトリ: syncfusion/angular-ui-components-skills
カテゴリ: デザイン・UI
インストール数: 263
GitHub スター: 0

問題を報告