spz-slide-indicator#

#何时使用

spz-slide-indicator 为 spz-carousel 提供圆点导航指示器。自动与轮播图的当前 slide 同步，支持点击导航。

#支持布局

• container

#代码演示

<spz-carousel id="my-carousel" layout="responsive" width="4" height="3">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</spz-carousel>

<spz-slide-indicator
  layout="container"
  carousel-id="my-carousel"
  size="5">
</spz-slide-indicator>

#属性

#状态属性

#CSS 类名

#工作原理

1. 构建时组件通过 getData() 读取轮播图的 slide 数量。
2. 根据 slide 数量动态创建圆点元素。
3. 点击圆点通过 goToSlide() 导航轮播图到对应 slide。
4. 轮播图在 slide 切换时调用指示器的 changeActive(current) 方法。
5. 当 slide 数量超过 size 时，可见圆点窗口会平滑滚动以保持活动圆点在视野内。

#注意事项

• 该组件不暴露自定义 action。
• 该组件不派发自定义事件。
• 指示器类型可通过 type 属性中的媒体查询实现响应式切换。