零基础可上手：EyouCMS轮播图上传配置到多端适配全流程指南

前期准备工作

环境与素材准备

1. 系统版本要求：EyouCMS V1.5.6及以上，低于该版本需先升级，官方升级包地址：https://www.eyoucms.com/upgrade/

2. 轮播图素材规范：PC端建议尺寸1920600px，移动端建议750400px，格式为JPG/PNG，单图大小控制在200KB以内，核心内容放在中间1200px安全区内，避免被裁剪。

后台登录入口

默认后台地址为「你的站点域名+/login.php」，使用安装时设置的管理员账号密码登录即可。

轮播图核心配置实操步骤

步骤1：进入轮播图管理模块

EyouCMS默认用广告插件实现轮播图功能，登录后台后，在左侧菜单栏依次点击【插件管理】→【广告管理】，找到名称为「首页轮播图」的默认广告位，点击右侧的【广告列表】按钮进入轮播图配置页。

注意：如果找不到对应广告位，说明当前模板未配置默认轮播广告位，需先按后文「自定义轮播广告位配置」流程操作。

步骤2：上传并新增轮播图

进入广告列表页后，按以下操作添加轮播图：

• 点击页面右上角【新增广告】按钮
• 填写基础配置项：
  • 广告名称：自定义填写，仅后台可见，比如「首页轮播1-618活动」
  • 广告类型：固定选择「图片广告」
  • 上传广告图：点击上传按钮，选择提前准备好的素材，支持本地上传和图库选择
  • 跳转链接：站内跳转填相对路径，比如/activity.html；站外跳转需带http/https前缀，不需要跳转填
  • 跳转方式：站内跳转选「当前窗口打开」，站外跳转选「新窗口打开」
  • 排序值：数字越小轮播优先级越高，填1即为第一张轮播图
  • 开启状态：选择「启用」
• 点击底部【确认提交】按钮，重复以上操作添加所有需要的轮播图即可。

步骤3：轮播效果参数调整

轮播的自动播放、切换速度等参数需修改模板配置，操作流程如下：

1. 首先确认轮播调用标签：在左侧菜单栏依次点击【模板管理】→【标签管理】，找到首页轮播调用标签，默认代码如下：

``` {eyou:adv id='home_slide' type='default' limit='5'} {/eyou:adv} ```

参数修改说明：修改limit属性值可调整轮播图最大展示数量，比如limit='3'即最多显示3张轮播图。

2. 调整轮播动效参数：找到站点目录下/public/static/js/common.js文件，或者首页模板底部的swiper初始化代码，默认代码如下，可按需修改对应参数：

``` var swiper = new Swiper('.home-swiper', { autoplay: { delay: 3000, // 自动切换间隔，单位毫秒，3000即3秒 disableOnInteraction: false, }, speed: 800, // 切换动画时长，单位毫秒 loop: true, // 是否循环轮播，true为开启，false为关闭 pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); ```

注意：不需要自动播放直接删除整个autoplay配置项即可。修改完成后保存文件，回到后台点击【系统】→【清空缓存】生效。

自定义轮播广告位配置（无默认轮播位时使用）

如果当前模板没有默认轮播广告位，按以下流程新增：

• 进入【插件管理】→【广告管理】，点击右上角【新增广告位】按钮
• 填写广告位信息：
  • 广告位名称：填写「首页轮播图」
  • 广告位宽度：填1920，广告位高度：填600
  • 广告位描述：填写「首页顶部轮播专用」
  • 是否开启：选择「是」
• 提交后获取广告位ID，比如ID为2，将前文轮播调用标签的type属性修改为对应ID即可，示例：{eyou:adv id='home_slide' type='2' limit='5'}

多端适配设置

方案1：单图自适应（适合内容简单的轮播）

如果PC和移动端展示相同内容，直接在首页模板的style标签中添加以下适配代码即可：

``` .home-swiper img { width: 100%; height: auto; object-fit: cover; } @media (max-width:768px) { .home-swiper img { height: 200px; / 移动端轮播高度，可按需调整 / } } ```

方案2：多端独立轮播（适合不同端展示不同内容）

如果需要PC和移动端展示不同的轮播图，按以下流程配置：

• 新增2个广告位，分别命名为「PC端首页轮播」和「移动端首页轮播」，分别上传对应尺寸的轮播图
• 将首页轮播调用代码替换为设备判断版本，示例如下：

``` {eyou:if condition='$eyou.is_mobile eq 1'} {eyou:adv id='mobile_slide' type='3' limit='4'} {/eyou:adv} {eyou:else /} {eyou:adv id='pc_slide' type='2' limit='5'} {/eyou:adv} {/eyou:if} ```

注意：代码中的type属性值要替换为你自己新增的PC、移动端广告位对应ID。

常见问题排查

• 轮播图不显示：先检查广告位、单条广告是否处于启用状态，调用标签的type值是否和广告位ID一致，清空后台缓存后强制刷新前台页面即可。
• 跳转链接失效：检查站外跳转链接是否带http/https前缀，站内跳转不要加域名，直接填写相对路径。
• 移动端轮播图变形：确认是否添加了适配CSS，建议优先使用多端独立轮播方案，避免图文被裁剪。