Carousel
Carousel
Applicable Scenarios
Used for quickly building carousel display effects, and supports configuring functions such as image click redirection and playback interval.
Basic Capabilities Description
Configurable Carousel Display Effects
Simply configure in the component configuration area to implement carousel display effects. You can also set corresponding redirect pages for each image in the configuration area. Additionally, our advanced settings support in-depth custom configuration of properties such as playback animations and anchor points for the carousel component.
Property Introduction
External properties received by the component
Property Name | Property Identifier | Type | Description |
|---|
| 轮播图 | images | array | Example: [ { "image": "https://main.qcloudimg.com/raw/828ee6644f137d166b063ad7f5dda842.png", "title": "图片1", "fit": "cover", "tapMode": "tap", "height": "160px", "width": "100%" }, { "image": "https://main.qcloudimg.com/raw/880b5277dc7d8f62fd6b5f964bee3af4.png", "title": "图片2", "fit": "cover", "tapMode": "tap", "height": "160px", "width": "100%" }, { "image": "https://main.qcloudimg.com/raw/af8d7dff73fea17aa099876bc3a811fa.png", "title": "图片3", "fit": "cover", "tapMode": "tap", "height": "160px", "width": "100%" } ] |
| 自动切换时间间隔（毫秒） | interval | number | 配置轮播图滚动的时间间隔，时间单位为ms Example: 5000 |
| 纵向轮播 | vertical | boolean | 开启后，轮播的滚动方式将会由横向滚动变更为纵向滚动 Example: false |
| 自动切换 | autoplay | boolean | 开启后，轮播图将会自动根据配置的时间间隔进行自动滚动，关闭后则轮播图仅支持通过点击锚点的方式进行切换 Example: true |
| 锚点激活色 | indicatorActiveColor | string | 更改锚点选中时的颜色 Example: "rgba(0, 0, 0, 0.9)" |
| 锚点颜色 | indicatorColor | string | 更改锚点普通状态下的颜色 Example: "rgba(200, 200, 200, 0.9)" |
| 滑动动画时长 | duration | number | 更改轮播图切换时的滑动动画时长 Example: 500 |
| 当前所在滑块的 index | current | number | 更改轮播图的默认展示位置，0为默认展示第一张轮播图，以此类推 Example: 0 |
| 衔接滑动 | circular | boolean | 更改轮播图切换时动画的滑动方式 Example: true |
| 导航锚点 | indicatorDots | boolean | 开启/关闭轮播图锚点 Example: true |
Event Introduction
Events exposed by the component. You can listen to component events to trigger external actions
Event Name | Event Code | Event Output Parameters event.detail | Applicable Scenarios | Description |
|---|
| 切换 | change | Compatible with all platforms | - |