如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Image Compare 对比图装修模块
概述
Image Compare 是一个为商城后台「设计 → 装修」功能增加前后对比图展示模块的插件。上传「前图片」与「后图片」，前台会叠加为一张可拖动滑块的前后对比图。访客左右拖动中间的滑块即可在两张图片之间平滑过渡，直观展示改造前后、新旧款式、真假对比等效果。非常适合用于产品升级展示、效果对比、案例演示等场景。
主要功能
🖼️ 可拖拽的前后对比图
| 特性 | 说明 |
|---|---|
| 前图 + 后图 | 上传两张对比图片，前台叠加显示 |
| 滑块拖动对比 | 访客左右拖动中间手柄，两张图片实时过渡切换 |
| 触屏支持 | 完美支持触摸屏设备，手指滑动即可对比 |
| 键盘控制 | 聚焦手柄后可用左右方向键微调对比位置 |
| 图片比例 | 建议尺寸 1000×500px（2:1 比例） |
🏷️ 文字标签与配色
| 特性 | 说明 |
|---|---|
| 前图文字标签 | 可自定义「前」侧标签文字（如「Before」「改造前」） |
| 后图文字标签 | 可自定义「后」侧标签文字（如「After」「改造后」） |
| 文字颜色独立 | 前标签和后标签可分别设置不同的文字颜色 |
📝 模块配置选项
| 配置项 | 说明 |
|---|---|
| 标题 | 模块主标题（支持多语言） |
| 描述 | 富文本描述文字（支持多语言） |
| 滑块初始位置 | 设置滑块默认位置百分比（0~100%），例如 50% 表示前后各占一半 |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
技术特点
-
✅ 纯 CSS 裁剪实现：使用
clip-path裁剪前图，性能极佳，无闪烁 -
✅ 平滑拖动体验：支持 Pointer Events（统一鼠标/触摸/触控笔），兼容旧设备回退方案
-
✅ 响应式设计：移动端自动调整对比图比例（3:2）和标签位置
-
✅ 无障碍支持：手柄具备 ARIA 属性和键盘控制，支持屏幕阅读器
-
✅ 视觉反馈：拖动时手柄轻微放大，提升交互感
-
✅ 任意主题兼容：前台视图由插件自带，完全独立渲染
-
✅ 装修编辑器完美支持：实时预览，滑块可拖动测试效果
适用场景
-
产品升级前后对比（旧款 vs 新款）
-
装修/改造效果展示（装修前 vs 装修后）
-
美容/护肤效果对比（使用前 vs 使用后）
-
真假产品鉴别
-
图片修复/处理效果展示
-
任何需要「前后对比」的视觉展示
