海洋CMS首页轮播图怎么设置？幻灯调用教程

海洋CMS设置首页轮播图有两条路：一是在后台「幻灯管理」里上传图片并填链接，前台自动调用，不用改一行代码；二是直接改模板 index.html，用幻灯标签循环输出数据，再套一层轮播 JS。绝大多数人只需要走第一条路，5 分钟能搞定；只有当默认模板的样式不满足需求时，才需要动模板。

海洋CMS的幻灯数据存在哪里？

结论：幻灯数据是独立于视频数据单独维护的，改完立即生效，不需要重新采集、也不需要重新生成页面。

后台菜单里通常有一项「幻灯管理」（不同版本可能在「内容管理」或「扩展管理」下，菜单位置略有差异，找不到就在后台搜索框搜「幻灯」两个字）。在这里新增的每一条记录，一般包含 4 个字段：图片、标题、链接地址、排序值。前台模板通过幻灯标签把这张表里的数据循环读出来，所以你在后台加一张图，前台刷新就能看到，跟视频库没有耦合关系。

海洋CMS后台怎么添加一张幻灯？

结论：后台添加幻灯的标准流程是「上传图片 → 填标题 → 填链接 → 设排序」，其中图片尺寸和链接格式是两个最容易踩坑的地方。

1. 登录后台，进入「幻灯管理」，点「添加幻灯」。
2. 上传图片。推荐尺寸 1920×600 像素（常见三栏模板用 1200×450 也行），格式 jpg/png，单张体积控制在 300KB 以内，超过 500KB 首屏会明显变慢。
3. 填标题，这个标题会同时作为图片的 alt 和鼠标悬停提示，对 SEO 有帮助，别留空。
4. 填链接。站内视频写相对路径（如 /detail/1234.html）或完整 URL 都可以；外链必须写完整的 http:// 或 https://，只写域名不写协议点击会跳错。
5. 设排序值。数字越小越靠前，建议首页只放 3 到 6 张，超过 8 张用户基本翻不完，首屏加载时间还会被拖长。

模板里怎么调用幻灯？标签怎么写？

结论：在模板目录的 index.html 里，用幻灯标签做循环输出，外面套轮播容器即可。

先找到模板目录，路径一般是 /template/模板名/index.html。打开后在头部区域搜索 slide 或 swiper 关键字，大概率能直接看到默认的幻灯写法。结构通常是这样：

<div class="swiper-wrapper">
{seacms:slidelist count=5}
  <div class="swiper-slide">
    <a href="[slidelist:link]" title="[slidelist:title]">
      <img src="[slidelist:pic]" alt="[slidelist:title]">
    </a>
  </div>
{/seacms:slidelist}
</div>

count=5 表示最多取 5 条，不写则按后台排序取全部。注意：不同版本的海洋CMS、以及第三方模板，幻灯标签的名字和内部字段名可能不一样（有的写 slide，有的写 slidelist）。**最稳的做法不是背标签，而是打开自带默认模板的 index.html，把里面现成的幻灯代码整段复制过来，只改 class 和样式。** 标签写错时前台不会报错，只会安静地什么都不显示，这也是很多人以为「幻灯功能坏了」的真正原因。

轮播图不显示、图片不出来，怎么排查？

结论：按「网页源码 → 图片路径 → JS 引入 → 缓存」这个顺序查，四步能覆盖九成以上的故障。

• 第一步，前台按 Ctrl+U 看网页源码，搜索幻灯标题。源码里没有内容，就是标签名或字段名写错了；源码里有内容但页面上看不到，问题出在 CSS 或 JS。
• 第二步，检查图片路径。后台填的是相对路径时，模板输出的 URL 可能拼错前缀，在源码里直接复制图片地址到浏览器打开验证。
• 第三步，确认轮播 JS 已引入。默认模板一般自带轮播脚本，改用 Swiper 的话，CSS 和 JS 两个文件都要引，初始化代码 new Swiper('.swiper', {...}) 里的选择器要和 HTML 的 class 对得上；Swiper 3 与 5 以上的配置参数不通用，抄代码前先看清版本。
• 第四步，清缓存。改完模板要在后台点一次「更新缓存」，浏览器再按 Ctrl+F5 强制刷新，否则看到的是旧页面。

该改后台还是该改模板？

结论：只换图片就改后台，要改尺寸、动效、每屏张数就改模板，两者可以共存。

后台「幻灯管理」负责内容，模板负责展示，分工是清晰的。你完全可以保留后台的添加方式，只在模板里把图片容器从 1200×450 改成 1920×600、给 img 加上 loading="lazy"、把自动播放间隔从 5 秒调到 3 秒。唯一要注意的是：如果你直接换了一套模板，新模板可能有自己的幻灯标签和图片尺寸要求，这时后台的数据还在，但需要按新模板的写法对接一遍。

总结一句：后台幻灯管理负责「放什么」，模板里的幻灯标签负责「怎么显示」。先在后台把 3 到 6 张 1920×600 的图加好，再从默认模板里复制幻灯代码改样式，是最省事的组合；出问题就按源码、路径、JS、缓存的顺序查，基本不会卡住。