加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
MooKwai特色块滑块

滑块

滑块(Slides)提供轮播的交互功能,可设置多组内容进行展示并自动轮流播放。

文章目录

区块与子区块

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

走马灯包含的区块为:

  • 滑块:组件的主区块,可在该区块内插入子区块
    • 容器:滑块元素容器,可插入一个或多个滑块元素区块
      • 滑块元素:可插入其他任何类型区块
    • 分页:自动获取滑块元素数量并生成相应分页元素
    • 按钮组:可插入切换按钮
      • 前一项:前一项按钮,可插入其他任何类型区块
      • 后一项:后一项按钮,可插入其他任何类型区块

配置选项

滑块

基本设置

全局样式

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 视频循环播放。

JSON文件

File Lottie 动画的 JSON 文件。

分页

自动隐藏

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

按钮组

自动隐藏

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

元素

// 滑块区块
<div class="mk-slides">
  // 容器区块
  <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-slides
  • 元素容器 .el-container
  • 走马灯元素 .el-item
  • 分页容器 .el-pagination
  • 分页元素 .el-pagination-dot
  • 按钮组 .el-toggle-group
  • 按钮 .el-toggle

其他

  • 所有的子区块仅可插入滑块区块内;
  • 全局样式的设置仅支持主区块,主区块的全局样式包含了所有子区块的元素设置,子区块无全局样式设置选项。

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧