轮播图（幻灯片/滑块）使用教程

本教程对应模块库中的“幻灯片/滑块”，用于展示首页首屏、产品亮点或品牌介绍。网站交付时，我们已搭建好页面；日常更新时，你只需编辑原有模块中的图片、文字和链接。

上方是三张图片组成的真实轮播。电脑端可使用左右箭头和底部圆点切换；手机预览可左右滑动。示例按钮会打开官网对应页面，示例图片与文字可在后台替换。

1. 找到首页中的轮播模块

1. 登录网站后台，进入页面 → 所有页面，找到需要修改的首页。
2. 进入这张页面的页面构建器，在首屏轮播区域打开模块编辑设置。
3. 确认模块名称是“幻灯片/滑块”。本教程针对这个模块，不是基础组件里的另一个“轮播图”组件。
4. 已有轮播时直接修改内容。如果要添加新的轮播，在构建器的模块 → Modular → 幻灯片/滑块中选择它。

模块设置分为“模块设置”和“内容设置”：前者控制整体尺寸和切换样式，后者编辑每一张幻灯片。

2. 设置轮播的宽度和高度

上方演示设置为电脑端 440 px、手机端 360 px。这是一组演示数值，不是所有网站都必须采用的标准。

设置固定高度后，图片会铺满显示区域并裁切超出的部分。请把产品主体放在画面中间，不要把重要文字放在图片边缘。出现裁切时，调整图片构图或模块高度。

3. 更换电脑图和手机图

1. 打开内容设置 → 幻灯片内容，展开要修改的那一项。
2. 将内容类型设为图片。
3. 在图片(PC端)中选择或上传电脑端图片。
4. 在图片(手机端)中选择或上传手机端图片。建议为手机重新安排构图，而不是直接沿用一张很宽的电脑图。
5. 逐项检查每张幻灯片，确保两端的图片均已配置。

上述尺寸来自模块设置中的提示。实际显示比例还取决于模块高度；替换图片后，需要同时查看电脑端和手机端。

4. 修改标题、描述和遮罩颜色

• 标题：填写这一张幻灯片最重要的一句话，例如“让客户快速了解你的企业”。
• 描述：补充业务特点或客户收益。填写标题后，后台会显示描述设置。
• 文本颜色：控制标题和描述的颜色，不是按钮文字的颜色。
• 图片滤镜：给背景增加一层颜色遮罩。背景较亮时，可使用带透明度的深色遮罩，使文字更清楚。
• 文本对齐方式：选择左对齐或居中显示。

标题、描述和遮罩都按每一项分别设置。修改第一张幻灯片，不会自动修改其他幻灯片。

5. 设置按钮和整张图片的跳转

先在跳转链接中填写完整地址，例如你网站的产品页面地址，再决定使用哪种点击方式。

需要显示文字按钮时，请同时填写标题。按钮位于文字内容区域中。不要把标题、描述都清空后，只保留按钮文本。

填写按钮文本后，点击按钮进行跳转，背景图片不再充当整图链接。保存后在网站前台实际点击一次，确认打开的是预期页面。

6. 添加多张图片并调整切换方式

在幻灯片内容列表中添加新的项目，每一项就是一张幻灯片。按顺序为每一项配置图片、标题和链接；需要调整顺序时，在该列表中拖动项目排序。

• 切换按钮：选择显示或不显示左右箭头。电脑端设为显示后，鼠标移入轮播区域时出现箭头；手机端不显示左右箭头，可使用滑动和底部状态点切换。
• 状态样式：选择圆点、长条或不显示。圆点和长条表示当前所在的幻灯片，并可点击切换。
• 自动播放：纯图片轮播有两张及以上时，系统按约 3 秒间隔自动切换，手动操作后继续轮播。当前后台没有单独的自动播放开关或间隔设置。
• 只有一张图片：作为单张横幅展示，不会自动切到其他内容。

每张图片建议保持一致的尺寸和构图方式；使用自适应高度时，不同图片比例会使轮播区域的高度随切换变化。

7. 使用视频时需要改哪些设置

需要视频背景时，把该项的内容类型改为视频，在出现的视频链接字段中填写可直接访问的 MP4 文件地址。这里填写的是视频文件直链，不是视频网站的播放页面地址。

视频按静音、循环的方式播放。包含视频的轮播不会使用纯图片轮播的 3 秒自动切换设置；切换内容可使用状态点或电脑端箭头。视频自动播放还受浏览器策略影响，发布后请用实际设备检查。第一次维护首页时，可以先按本教程完成图片轮播。

8. 保存后检查电脑端和手机端

1. 点击构建器的保存，等待保存完成。
2. 打开网站前台，检查每张图片、标题和描述是否已经更新。
3. 切换所有幻灯片，检查按钮链接是否分别指向正确页面。
4. 用手机打开页面，检查手机图是否显示、文字是否被裁切、按钮是否便于点击。
5. 检查页面上下滚动是否正常，再确认轮播区域高度与前后模块衔接自然。

9. 按现象检查设置

如果需要调整自动播放间隔或现有字段之外的功能，请联系交付人员处理，不需要自行修改网站代码。