走马灯

特色

轮播图以全屏宽度或容器完整宽度；
可添加切换按钮或拖拽进行切换；
当元素数量为2个或以上时，则自动添加轮播效果，当元素数量小于2时，无轮播效果；
可设置轮播交互动画的相关属性。

区块与子区块

走马灯由多个区块共同组成一个组件，您可根据实际情况选择需要的区块进行组合。

走马灯包含的区块为：

走马灯：组件的主区块，可在该区块内插入子区块
- 容器：走马灯容器，可插入一个或多个走马灯元素区块
  - 走马灯元素：可插入其他任何类型区块
- 分页（可选）：自动获取走马灯元素数量并生成相应分页元素
- 按钮组（可选）：可插入切换按钮
  - 前一项：前一项按钮，可插入其他任何类型区块
  - 后一项：后一项按钮，可插入其他任何类型区块

配置选项

全局样式

Select 设置区块对应的全局样式。

Html标签

Select 区块根元素的 Html 标签类型。

交互设置

划过时暂停

Boolean 鼠标滑过元素时暂停自动播放。

停留时长

Number 0 – 100 之间的任意数值，整数或浮点数。设置内容的停留时长，单位秒。

切换时长

Number 0 – 100 之间的任意数值，整数或浮点数。设置内容之间切换动画的持续时间，单位秒。

走马灯元素

媒体背景

媒体背景仅走马灯元素区块可设置。

使用媒体背景

Boolean 区块根元素是否插入媒体文件作为区块背景。

媒体类型

Select 媒体背景的文件类型，可为图像、视频或 Lottie 动画。

图像文件

File 选择/上传图像文件，支持 jpg / png / gif 等图像或 svg 图形格式文件。

视频文件

File 选择/上传视频文件，支持 mp4 等视频格式文件。

封面图

File 视频封面图片，支持 jpg / png / gif 等图像或 svg 图形格式文件。

自动播放

Boolean 页面加载完成后自动播放视频。

循环播放

Boolean 视频循环播放。

分页

自动隐藏

Boolean 自动隐藏分页组件，当鼠标移入组件后显示。

按钮组

自动隐藏

Boolean 自动隐藏切换按钮组件，当鼠标移入组件后显示。

元素

// 走马灯区块
<div class="mk-carousel">
  // 容器区块
  <div class="el-container">
    // 走马灯元素区块
    <div class="el-item">...内部区块</div>
    <div class="el-item">...内部区块</div>
    <div class="el-item">...内部区块</div>
    ...
  </div>
  // 分页区块
  <div class="el-pagination">
    <span class="el-pagination-dot current"></span>
    <span class="el-pagination-dot"></span>
    <span class="el-pagination-dot"></span>
  </div>
  // 按钮组区块
  <div class="el-toggle-group">
    // 前一项按钮区块
    <div class="el-toggle el-toggle-prev">...内部区块</div>
    // 后一项按钮区块
    <div class="el-toggle el-toggle-next">...内部区块</div>
  </div>
</div>

走马灯区块提供以下元素的设置：

主容器 .mk-carousel
元素容器 .el-container
走马灯元素 .el-item

其他

所有的子区块仅可插入走马灯区块内；
全局样式的设置仅支持主区块，主区块的全局样式包含了所有子区块的元素设置，子区块无全局样式设置选项；
当走马灯区块内仅有一个走马灯元素区块，则无交互状态。