用途
Syncfusion Angular Carousel 组件用于在 Angular 应用中以幻灯片(轮播)形式展示内容。当需要按顺序展示多项内容(图片、产品、文章)、创建图片画廊、轮播精选内容、提供类似滚动的浏览体验、添加动画与过渡效果、支持触控交互、显示进度指示器或处理幻灯片切换事件时,可以使用该组件。
主要能力
- 动画效果:animationEffect 属性支持 None、Slide、Fade 及 Custom(配合 cssClass 定义自定义 CSS 动画),默认 Slide。
- 自动播放:autoPlay 默认为 true,interval 默认 5000 毫秒,pauseOnHover 默认 true(鼠标悬停时暂停)。
- 导航控制:buttonsVisibility 支持 Visible、Hidden、VisibleOnHover;previousButtonTemplate 与 nextButtonTemplate 可自定义按钮;loop 默认 true 实现无限循环;selectedIndex 指定初始幻灯片索引(默认 0)。
- 指示器:showIndicators 默认 true;indicatorsType 支持 Default(圆点)、Dynamic(动态)、Fraction(分数形式)、Progress(进度条);indicatorsTemplate 可自定义指示器。showPlayButton 与 playButtonTemplate 控制播放按钮。
- 数据与项:dataSource 配合 itemTemplate 渲染动态项;items 配合 e-carousel-item 指令渲染静态内容;cssClass 用于容器样式。
- 交互:enableTouchSwipe 默认 true 启用触控滑动;swipeMode 支持 Touch、Mouse、Touch|Mouse(默认);allowKeyboardInteraction 默认 true 启用方向键导航。
- 尺寸:height 与 width 默认均为 100%;partialVisible 默认 false,启用后显示相邻幻灯片的部分内容。
- 本地化与持久化:locale 指定语言(影响 aria 标签等无障碍文本);enablePersistence 默认 false,开启后将状态保存至 localStorage 并在页面重载时恢复。
- 无障碍:enableRtl 默认 false 启用从右到左布局;htmlAttributes 可为根元素添加额外 HTML 属性。
使用方式
通过 npm 包 @syncfusion/ej2-angular-navigations 导入 CarouselModule,在独立的 Angular 组件中引入后使用 <ejs-carousel> 标签。静态内容使用 <e-carousel-items> 与 <e-carousel-item> 配合 ng-template 渲染;动态内容使用 dataSource 配合 itemTemplate。可通过 @ViewChild 获取组件实例并调用方法。
方法
- next():编程方式切换到下一张幻灯片
- prev():编程方式切换到上一张幻灯片
- play():恢复自动播放
- pause():暂停自动播放
- destroy():销毁组件并释放资源,应在组件移除前调用
适用场景
图片画廊、产品/内容轮播、促销横幅、精选文章或产品高亮展示、需要触控滑动或键盘导航的内容浏览界面,以及需要 RTL 支持或状态持久化的场景。
限制
资料中未提供关于收费、价格、平台兼容性细节、性能基准或具体使用步骤的额外说明。