水平滚动

特色

水平滚动区块内可插入水平滚动容器区块以及其他任何类型的区块；
水平滚动容器区块内仅可插入1个或多个水平滚动元素区块，水平滚动元素区块内可插入其他任何类型区块；
每个水平滚动元素区块的宽度可自由设置，且每个元素可设置为不同的宽度。

区块与子区块

水平滚动包含的区块为：

水平滚动：组件的主区块，可在该区块内插入子区块
- 容器：水平滚动容器，可插入一个或多个水平滚动元素区块
  - 元素：可插入其他任何类型区块
- 其他区块（可选）：可插入其他任何类型区块

配置选项

全局样式

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

Html 标签

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

交互设置

起始点

String | Function 开始水平滚动的起始点，该起始点为主元素的起始点。

开始停留

Number 当前水平滚动区块到达开始触发点后，其中第一个水平元素的停留时长。

结束停留

Number 当前水平滚动区块到达结束触发点后，其中最后一个水平元素的停留时长。

平滑

Number 0 ～ 10 之间的任意数值，可为整数或浮点数。水平滚动动画的平滑效果。

速度

Number 0.001 ～ 10 之间的任意数值，可为整数或浮点数。水平滚动动画的速度，默认值为 1。

设备

Select 选择所支持的设备。

水平滚动元素

Html 标签

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

媒体背景

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

使用媒体背景

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

媒体类型

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

图像文件

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

视频文件

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

封面图

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

自动播放

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

循环播放

Boolean 视频循环播放。

输出结构

// 水平滚动区块
<div class="mk-horizontal">
  ...
  // 容器区块
  <div class="el-container">
    // 元素区块
    <div class="el-item">...内部区块</div>
    <div class="el-item">...内部区块</div>
    <div class="el-item">...内部区块</div>
    ...
  </div>
  ...
</div>

水平滚动区块提供以下元素的设置：

主容器 .mk-horizontal
元素容器 .el-container
水平滚动元素 .el-item

其他

全局样式的设置仅支持主区块，主区块的全局样式包含了所有子区块的元素设置，子区块无全局样式设置选项；
水平滚动容器区块内仅可插入1个或多个水平滚动元素区块，水平滚动元素区块内可插入其他任何类型区块；
水平滚动区块内必须包含水平滚动容器区块，且水平滚动元素区块内必须包含至少一个水平滚动元素区块；
当容器内所有水平滚动元素的总宽度小于或等于容器宽度时，则无水平滚动效果；
主区块的工具栏中的展开按钮，可在编辑模式下将内容展开或收起，方便在编辑器中对内容进行编辑。