如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Five Images Row 一行五图装修模块
概述
Five Images Row 是一个为商城后台「设计 → 装修」功能增加图文组合展示模块的插件。它由 1 张大图（长图，支持多张自动轮播）和 4 张小图组成，提供四种版式布局（长图居左 / 长图居中 / 长图居右 / 横图居上）。每张图片均可独立配置跳转链接和按钮文字，非常适合用于首页品牌展示、活动推广、分类导购等场景。
主要功能
🖼️ 图文组合布局
| 特性 | 说明 |
|---|---|
| 1 张大图 + 4 张小图 | 经典的 1+4 图片组合，视觉层次分明 |
| 四种版式可切换 | 长图居左 / 居中 / 居右 / 横图居上，灵活适配不同需求 |
| 大图轮播 | 支持多张图片自动滚动（单张时不滚动），适合展示多个活动 |
| 每个图片独立配置 | 每张图片均可设置跳转链接和按钮文字 |
🎨 版式说明
| 版式 | 说明 | 适用场景 |
|---|---|---|
| 长图居左 | 大图占据左侧两行，右侧 2×2 小图 | 突出大图主体内容 |
| 长图居中 | 大图居中，两侧各 2 张小图 | 平衡对称，视觉均衡 |
| 长图居右 | 大图占据右侧两行，左侧 2×2 小图 | 大图收尾，信息前置 |
| 横图居上 | 大图横跨整行位于顶部，下方 4 张小图一排 | 横向展示，适合宽幅图片 |
📐 配置选项
| 配置项 | 说明 |
|---|---|
| 标题 | 模块主标题（支持多语言） |
| 简短描述 | 模块描述文字（支持富文本） |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
| 自动滚动 | 开关控制大图轮播是否自动播放 |
| 滚动间隔 | 可设置 1~10 秒的轮播间隔 |
| 大图列表 | 支持多张图片，可拖拽排序 |
| 小图（4 张） | 固定 4 个小图位，每张独立配置 |
技术特点
-
✅ 四种版式一键切换：通过 CSS Grid 布局实现，无需重新配置内容
-
✅ 大图轮播：基于 Swiper，支持多张图片自动滚动和分页点指示
-
✅ 响应式设计：移动端自动将布局堆叠为大图置顶 + 小图 2×2
-
✅ 独立链接与按钮：每张图片均可配置跳转链接和按钮文字
-
✅ 悬停缩放效果：鼠标悬停时图片平滑放大，增强交互感
-
✅ 任意主题兼容：前台视图由插件自带，样式使用 CSS 变量适配主题
-
✅ 装修编辑器完美支持：实时预览，版式切换即时生效
-
✅ 拖拽排序：大图列表支持拖拽调整顺序
适用场景
-
首页品牌活动聚合（促销、新品、爆款）
-
分类导购入口（女装、男装、童装、配饰）
-
季节/节日主题营销（春夏、秋冬、双11、圣诞）
-
品牌故事展示（品牌形象 + 旗下子品牌）
-
内容推广（视频/直播入口 + 相关推荐）
