Carousel 轮播图

轮播图组件，用于循环播放图片或内容。

基础用法

<div id="demo-carousel"></div>

<script>
  const carousel = new SaCarousel('#demo-carousel', {
    items: [
      { text: '第一张', html: '<div style="background: #409EFF; color: white; height: 100%; display: flex; align-items: center; justify-content: center;">第一张</div>' },
      { text: '第二张', html: '<div style="background: #67C23A; color: white; height: 100%; display: flex; align-items: center; justify-content: center;">第二张</div>' },
      { text: '第三张', html: '<div style="background: #E6A23C; color: white; height: 100%; display: flex; align-items: center; justify-content: center;">第三张</div>' }
    ],
    showIndicators: true,
    showArrows: true
  });
</script>

加载 SanoUI 组件中...

自动播放

通过 autoplay: true 启用自动播放。

<div id="demo-carousel-autoplay"></div>

<script>
  const carousel = new SaCarousel('#demo-carousel-autoplay', {
    items: [
      { text: '第一张', html: '<div style="background: #409EFF; color: white; height: 100%; display: flex; align-items: center; justify-content: center;">第一张</div>' },
      { text: '第二张', html: '<div style="background: #67C23A; color: white; height: 100%; display: flex; align-items: center; justify-content: center;">第二张</div>' },
      { text: '第三张', html: '<div style="background: #E6A23C; color: white; height: 100%; display: flex; align-items: center; justify-content: center;">第三张</div>' }
    ],
    autoplay: true,
    interval: 3000,
    showIndicators: true,
    showArrows: true
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaCarouselOptions	{}

配置选项

参数	说明	类型	可选值	默认值
items	轮播项数组	Array<CarouselItem>	-	[]
autoplay	是否自动播放	boolean	-	false
interval	自动播放间隔（毫秒）	number	-	3000
showIndicators	是否显示指示器	boolean	-	true
showArrows	是否显示箭头	boolean	-	true

CarouselItem 配置

参数	说明	类型	默认值
text	项文本	string	-
html	项HTML内容	string	-
image	项图片地址	string	-

方法

方法名	说明	参数	返回值
next	下一张	-	void
prev	上一张	-	void
goTo	跳转到指定索引	index: number	void
start	开始自动播放	-	void
stop	停止自动播放	-	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const carousel = new SaCarousel('#my-carousel', {
  items: [
    { image: 'https://example.com/image1.jpg' },
    { image: 'https://example.com/image2.jpg' },
    { image: 'https://example.com/image3.jpg' }
  ],
  autoplay: true,
  interval: 3000,
  showIndicators: true,
  showArrows: true
});

// 下一张
carousel.next();

// 上一张
carousel.prev();

// 跳转到第2张（索引从0开始）
carousel.goTo(1);

// 停止自动播放
carousel.stop();

// 开始自动播放
carousel.start();

实际使用场景

场景 1：轮播广告

使用轮播图展示广告内容。

<div id="ad-carousel" style="height: 300px; margin-bottom: 1rem;"></div>
<div style="display: flex; gap: 0.5rem;">
  <button class="sa-button" onclick="carousel.prev()">上一张</button>
  <button class="sa-button" onclick="carousel.next()">下一张</button>
  <button class="sa-button" onclick="carousel.stop()">停止</button>
  <button class="sa-button" onclick="carousel.start()">开始</button>
</div>

<script>
  const carousel = new SaCarousel('#ad-carousel', {
    items: [
      {
        html: '<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem;">广告1：限时优惠</div>'
      },
      {
        html: '<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem;">广告2：新品上市</div>'
      },
      {
        html: '<div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem;">广告3：会员专享</div>'
      }
    ],
    autoplay: true,
    interval: 3000,
    showIndicators: true,
    showArrows: true
  });
</script>

加载 SanoUI 组件中...

场景 2：产品展示轮播

使用轮播图展示产品图片。

<div id="product-carousel" style="height: 400px;"></div>

<script>
  const carousel = new SaCarousel('#product-carousel', {
    items: [
      {
        image: 'https://via.placeholder.com/800x400/409EFF/ffffff?text=产品图片1',
        text: '产品1'
      },
      {
        image: 'https://via.placeholder.com/800x400/67C23A/ffffff?text=产品图片2',
        text: '产品2'
      },
      {
        image: 'https://via.placeholder.com/800x400/E6A23C/ffffff?text=产品图片3',
        text: '产品3'
      }
    ],
    autoplay: true,
    interval: 4000,
    showIndicators: true,
    showArrows: true
  });
</script>

加载 SanoUI 组件中...