# 页面组件：幻灯片-图片轮番播放

来源快照：`result_data_new_260518.json`

- 来源 ID：`1967652028156470991`
- 模块：低代码平台e-builder
- 目录：专题学习 - 功能点专题 - 页面图表
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**  
**

**1.****场景说明**

通常我们在设计门户页面的时候，会有部分图片需要进行轮播展示，这种情况可采用幻灯片组件进行实现。

效果展示：![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709598676819977&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

**2.功能简介**

上述场景可以使用页面设计中的幻灯片组件来实现，幻灯片组件具有以下四个特点：

1、图片来源支持：数据源、手动添加两种方式

2、手动添加可分素材库、本地、图片路径；

3、图片来源为数据源时可设置过滤条件以及显示条数；

4、可设置显示方式、切换动画方式、自定义设置轮播时间或者不轮播。

  


******3.操作说明        **

   


图片来源为手动添加

1、选中基础类组件幻灯片，拖拽到页面编辑器中，图片来源选择为手动添加，添加图片、设置显示方式、切换动画、轮播设置

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709615831523336&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


2、添加图片标题、描述，选择幻灯片样式

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709628803874861&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


图片来源为数据源

  


1、选中基础类组件幻灯片，拖拽到页面编辑器中，图片来源选择为数据源，选择数据源、图片、标题等字段

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709641542606935&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


2、设置显示方式、切换动画、轮播设置、幻灯片样式

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709650177163271&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
