syncfusion-javascript-carousel

用途

Syncfusion JavaScript Carousel 用于在幻灯片式界面中展示图片、链接和其他媒体内容，适合创建图片画廊、轮播内容、精选项目展示和交互式媒体演示。

主要能力

• 多项目渲染：从数组或数据源显示项目。
• 动画效果：支持 Slide、Fade、None 或自定义动画的平滑过渡。
• 导航控件：上一页/下一页按钮，可配置可见性模式（Hidden、Visible、VisibleOnHover）。
• 指示器：支持 Default、Dynamic、Fraction、Progress 等指示器类型，显示幻灯片位置。
• 自动播放：可配置间隔时间自动切换幻灯片，支持悬停暂停。
• 键盘支持：完整的键盘导航。
• 无障碍：符合 WAI-ARIA，适配辅助技术。
• 触摸/鼠标滑动：在触摸设备上支持手势导航。
• 模板支持：项目和按钮可使用自定义 HTML 模板。
• 响应式：适应不同屏幕尺寸和部分可见模式。

使用方式

通过 npm 安装 @syncfusion/ej2-navigations 包，导入 Carousel 类，配置 items、animationEffect、autoPlay、interval、buttonsVisibility 等属性，然后调用 appendTo 方法挂载到指定 DOM 元素。

快速开始示例：

import { Carousel } from "@syncfusion/ej2-navigations";

const carouselObj = new Carousel({
  items: [
    { template: '<img src="image1.jpg" alt="Image 1" style="height:100%;width:100%;" />' },
    { template: '<img src="image2.jpg" alt="Image 2" style="height:100%;width:100%;" />' },
    { template: '<img src="image3.jpg" alt="Image 3" style="height:100%;width:100%;" />' }
  ],
  animationEffect: "Slide",
  autoPlay: true,
  interval: 3000,
  buttonsVisibility: "Visible"
});

carouselObj.appendTo("#carousel");

常用模式包括：带自动播放的图片画廊、仅手动导航、带事件处理、响应式部分可见。

事件处理示例：

carousel.addEventListener('slideChanged', (args) => {
  console.log(`Slide changed to: ${args.currentIndex}`);
});

carousel.addEventListener('slideChanging', (args) => {
  if (args.nextIndex === 5) {
    args.cancel = true; // Prevent navigation to slide 5
  }
});

关键属性

• items：CarouselItemModel[]，要显示的轮播项目数组。
• autoPlay：boolean，启用自动幻灯片切换。
• interval：number，自动播放切换之间的毫秒数。
• animationEffect：CarouselAnimationEffect，幻灯片过渡动画类型。
• buttonsVisibility：CarouselButtonVisibility，显示/隐藏导航按钮。
• indicatorsType：CarouselIndicatorsType，位置指示器样式。
• showIndicators：boolean，显示指示器圆点/数字。
• showPlayButton：boolean，显示播放/暂停按钮。
• pauseOnHover：boolean，悬停时暂停自动播放。
• enableTouchSwipe：boolean，允许触摸滑动手势。
• allowKeyboardInteraction：boolean，启用键盘导航。
• loop：boolean，最后一张幻灯片后从头重新开始。
• partialVisible：boolean，部分显示上一张/下一张幻灯片。
• height：string | number，轮播高度（像素或百分比）。
• width：string | number，轮播宽度（像素或百分比）。

适用场景

• 图片画廊：带缩略图的相册、多图产品展示、精选项目轮播。
• 新闻/内容轮播：轮播标题显示、精选文章轮播、推荐语轮播。
• 媒体演示：幻灯片查看器、作品集展示、视频缩略图轮播。
• 电子商务：产品图片画廊、精选产品区域、分类展示。
• 落地页：主图轮播、精选区域轮播、促销横幅。

限制

资料中未提供关于收费、价格、平台兼容性、性能上限或具体使用限制的明确说明，暂未提供。