spz-slide-indicator 滑块指示器

与 spz-carousel 配合使用的轮播指示点组件，支持点击指示点切换幻灯片

布局

container

何时使用

配合 spz-carousel 使用，展示当前幻灯片位置及总数。
当幻灯片数量较多时，通过 size 属性限制可视指示点数量，超出范围的指示点以缩小形式显示。
需要通过点击指示点直接跳转到对应幻灯片时。

代码演示

基本用法

将 carousel-id 设置为对应 spz-carousel 的 id，组件会自动获取幻灯片数量并渲染指示点，点击指示点可跳转到对应幻灯片。

幻灯 1

幻灯 2

幻灯 3

幻灯 4

<div class="demo-carousel-wrap">
  <spz-carousel
    id="demo-si-carousel"
    layout="responsive"
    width="360"
    height="200"
    loop
    autoplay
    delay="2500"
  >
    <div style="background:#4f8ef7;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:bold;">幻灯 1</div>
    <div style="background:#f7794f;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:bold;">幻灯 2</div>
    <div style="background:#4fc97f;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:bold;">幻灯 3</div>
    <div style="background:#a855f7;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:bold;">幻灯 4</div>
  </spz-carousel>

  <spz-slide-indicator
    id="spz-slide-indicator-base"
    layout="container"
    carousel-id="demo-si-carousel"
    size="4"
  ></spz-slide-indicator>
</div>

属性

属性名	说明	类型	默认值	是否必需
carousel-id	关联的 `spz-carousel` 元素的 `id`	string	-	是
size	最多可见的指示点数量，超出范围的点缩小显示	number	-	否
type	指示器类型，支持媒体查询写法，例如：`(min-width:960px) bar, dot`	string	-	否