
# 轮播
轮播是媒体组件的一种，是多图片轮播组件，可实现多图片的切换和对应事件。
在高级页面设计器中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127169.png)，从"媒体 \> 通用"中，拖拽"轮播"组件到画布中，如[图1]所示。
图1轮播   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047856.png "点击放大")
#### 属性
在属性中，设置轮播组件的位置、边框、连接器等。
图2属性   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127173.png "点击放大")
- 基础
  - 组件标题：设置组件的标题。
  
  - 组件名称：设置组件的名称。
   
- 位置
  - 距离左端：组件到页面左侧的距离，单位为px。
  
  - 距离顶端：组件到页面顶部的距离，单位为px。
  
  - 宽度：组件的宽度，单位为px。
  
  - 高度：组件的高度，单位为px。
  
  - 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是"1"，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为"0"。
  
  - 自适应高度：组件的高度是否随宽度改变。
   
- 边框：设置组件的边框样式，如全边框或角边框。
- 背景
  - 样式：设置背景的样式，如普通、居中、拉伸等。
  
  - 图片链接：背景图片URL。
  
  - 颜色：设置背景的颜色。
   
- 自定义属性列表：显示组件的自定义属性。
- 图片源设置：图片来源是否取自OBS连接器。
  - 勾选使用连接器，表示取自OBS连接器。当连接器中图片过多时，可能会导致读取图片缓慢，且打包该页面时，由于图片地址为绝对地址，打包安装后，图片地址不可用，需要重新上传图片并进行配置。
  
  - 不勾选使用连接器，表示图片来源取自平台接口。选择图片后实际存储的是图片id，页面随应用打包时会将图片一起打包，在新环境安装后无需重新上传配置。
   
- 连接器设置
  - 选择连接器：选择有存储功能的OBS类型连接器。OBS连接器配置完成后，才可以进行图片的查询、上传等操作，连接器的配置方法请参见[对接OBS云对象存储实例](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0090.html)。
  
  - 选择桶：连接器的存储桶。
   
 
#### 高级设置
在高级设置中，可设置轮播时长、切换方式等。
图3高级设置   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047868.png)
- 轮播设置
  - 切换方向：广告图片的轮播切换样式，支持横向滚动切换、右下角滚动切换和纵向滚动切换。
  
  - 加载自动播放：是否自动轮播。开启后，支持设置图片轮播时间间隔（不大于24秒）。
  
  - 切换方式：设置图片切换时，展示的样式，如淡出、推出等。
  
  - 定位标志：设置分页图标样式。
   
- 图片管理：对图片进行管理，并支持为图片配置跳转链接。
  - 单击"添加"，在"选择图片/视频"页面，单击目录后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047872.png)和![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888480.png)，可管理图片目录。单击"上传图片/视频"，可上传图片。
  
  - 选中图片，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127165.png)，可删除图片。
  
  - 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047860.png)，可编辑图片跳转链接。
   
 
#### 数据
在数据中，设置组件的数据来源。更多介绍，请参见[如何调用后台接口](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0192.html)。
图4设置组件数据   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047852.png "点击放大")
#### 事件
在事件中，可查看组件可配置的事件列表。更多关于事件的介绍，请参见[初识事件-动作](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0167.html)。
图5设置事件   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047864.png "点击放大")
