spz-3d-carousel 3D 轮播

用于以立体 3D 视差效果展示多张幻灯，支持拖动切换、自动播放及响应式布局

布局

何时使用

需要以立体视差效果展示一组图片或卡片内容时。
希望突出中央幻灯，同时让前后幻灯以缩小形式显示，营造空间层次感时。

代码演示

基本用法

最简单的用法，配置 controls 属性显示左右切换按钮，支持触摸/鼠标拖动切换。

幻灯 1

幻灯 2

幻灯 3

幻灯 4

幻灯 5

<spz-3d-carousel id="spz-3d-carousel-base" layout="container" controls center-ratio="1.6" visible-count="3">
  <div class="carousel-slide" style="background:#4f8ef7;">幻灯 1</div>
  <div class="carousel-slide" style="background:#f7794f;">幻灯 2</div>
  <div class="carousel-slide" style="background:#4fc97f;">幻灯 3</div>
  <div class="carousel-slide" style="background:#a855f7;">幻灯 4</div>
  <div class="carousel-slide" style="background:#f59e0b;">幻灯 5</div>
</spz-3d-carousel>

自动播放

配置 autoplay 属性开启自动播放，可通过 delay 设置间隔时间。

幻灯 1

幻灯 2

幻灯 3

幻灯 4

幻灯 5

<spz-3d-carousel id="spz-3d-carousel-autoplay" layout="container" autoplay delay="2000" center-ratio="1.6">
  <div class="carousel-slide" style="background:#4f8ef7;">幻灯 1</div>
  <div class="carousel-slide" style="background:#f7794f;">幻灯 2</div>
  <div class="carousel-slide" style="background:#4fc97f;">幻灯 3</div>
  <div class="carousel-slide" style="background:#a855f7;">幻灯 4</div>
  <div class="carousel-slide" style="background:#f59e0b;">幻灯 5</div>
</spz-3d-carousel>

方法调用

通过按钮调用 goNext、goPrev、goToSlide 方法切换幻灯。

幻灯 1

幻灯 2

幻灯 3

幻灯 4

幻灯 5

<spz-3d-carousel id="spz-3d-carousel-api-usage" layout="container" center-ratio="1.6">
  <div class="carousel-slide" style="background:#4f8ef7;">幻灯 1</div>
  <div class="carousel-slide" style="background:#f7794f;">幻灯 2</div>
  <div class="carousel-slide" style="background:#4fc97f;">幻灯 3</div>
  <div class="carousel-slide" style="background:#a855f7;">幻灯 4</div>
  <div class="carousel-slide" style="background:#f59e0b;">幻灯 5</div>
</spz-3d-carousel>

<div class="demo-api-buttons">
  <button @tap="spz-3d-carousel-api-usage.goPrev()">上一张</button>
  <button @tap="spz-3d-carousel-api-usage.goNext()">下一张</button>
  <button @tap="spz-3d-carousel-api-usage.goToSlide(index=0)">第 1 张</button>
  <button @tap="spz-3d-carousel-api-usage.goToSlide(index=2)">第 3 张</button>
  <button @tap="spz-3d-carousel-api-usage.goToSlide(index=4)">第 5 张</button>
</div>

属性

属性名	说明	类型	默认值	是否必需
initial-slide	默认展示第几张幻灯，索引从 `0` 开始	number	`0`	否
visible-count	同时可见的幻灯数量，支持媒体查询写法，例如：`(min-width:960px) 3, 2`	number	`3`	否
center-ratio	中央幻灯相对于两侧幻灯的宽度倍数	number	`1.6`	否
gap	幻灯之间的间距，单位：像素	number	`24`	否
animate-time	切换动画时间，单位：毫秒	number	`400`	否
controls	如果该属性存在，显示左右切换按钮	-	-	否
autoplay	如果该属性存在，开启自动播放	-	-	否
delay	自动播放间隔时间，最小值：`1000`，单位：毫秒	number	`5000`	否
disabled-scroller	如果该属性存在，禁用拖动/滑动手势切换	-	-	否

方法

goToSlide

切换到指定索引的幻灯。

参数	说明	类型	是否必需
index	目标幻灯的索引，从 `0` 开始	number	是

goNext

切换到下一张幻灯，不需要参数。

goPrev

切换到上一张幻灯，不需要参数。

事件

event 对象数据

属性	说明	类型
id	组件的 `id` 属性值	string
index	当前展示的幻灯索引，从 `0` 开始	number
total	幻灯的总数	number

mounted

当组件挂载完成时该事件会自动触发。

slideChange

当切换幻灯时该事件会自动触发。