mcpField
S
syncfusion-angular-carousel

syncfusion-angular-carousel

github.com/syncfusion设计与 UI0263 次安装1 周前更新
代码仓库

关于 syncfusion-angular-carousel

面向 Angular 开发者的 Syncfusion Carousel 组件技能，用于构建图片、产品或内容轮播。它涵盖自动播放、触控与键盘导航、指示器、模板和状态持久化等配置。

主要功能

  1. 01自动播放与多种切换动画
  2. 02配置前后导航和位置指示器
  3. 03支持触控滑动与键盘操作
  4. 04通过模板定制项目和控件
  5. 05支持 RTL 与状态持久化

适用场景

  1. 01创建可滑动的图片画廊
  2. 02轮播展示产品或精选内容
  3. 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 个属性的默认值完整表格：

属性默认值类型
allowKeyboardInteractiontrueboolean
animationEffect'Slide'string
autoPlaytrueboolean
buttonsVisibility'Visible'string
cssClass''string
dataSourcenullany[]
enablePersistencefalseboolean
enableRtlfalseboolean
enableTouchSwipetrueboolean
height'100%'string/number
htmlAttributesnullRecord
indicatorsTemplatenullstring/object
indicatorsType'Default'string
interval5000number (ms)
itemTemplatenullstring/object
items[]CarouselItem[]
locale''string
looptrueboolean
nextButtonTemplatenullstring/object
partialVisiblefalseboolean
pauseOnHovertrueboolean
playButtonTemplatenullstring/object
previousButtonTemplatenullstring/object
selectedIndex0number
showIndicatorstrueboolean
showPlayButtontrueboolean
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}`);
  }
}

实现指南

有关特定主题的详细实现，请参阅：

后续步骤

  1. 选择数据方式： 静态内容使用 items 绑定，动态数据使用 dataSource
  2. 选择导航样式： 按钮、指示器，或两者兼用
  3. 决定动画效果： 无、Slide（默认）、Fade 或自定义 CSS 效果
  4. 配置自动播放： 设置间隔和暂停行为
  5. 处理事件： 监听 slideChanging 和 slideChanged，以实现自定义逻辑
  6. 设置轮播样式： 应用 CSS 类和响应式设计
  7. 测试交互： 验证触控／键盘导航和事件处理

请参阅参考文件，了解详细的实现示例和最佳实践。

评论

支持 Markdown