对比图装修模块
0 下载次数
21 查看数
2026-05-28 最后更新
¥39.00
¥59.00
一次购买永久使用,并赠送1个月技术支持
如何购买
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 使用后)
-
真假产品鉴别
-
图片修复/处理效果展示
-
任何需要「前后对比」的视觉展示

