商品轮播装修模块
0 下载次数
34 查看数
2026-05-26 最后更新
￥39.00
￥59.00
订阅价格：
按额度充值订阅
首次购买赠送1元额度，后续充值额度使用
如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Product Carousel 商品轮播装修模块
概述
Product Carousel 是一个为商城后台「设计 → 装修」功能增加商品轮播展示模块的插件。你可以手动挑选一组商品，或以分类自动拉取、访问量排行、销量排行等方式获取商品，以横向轮播（滑动）的形式展示。支持标题、描述、每排数量、左右切换箭头、自动计算的折扣角标，以及可自定义的「查看更多」按钮。
主要功能
🎯 四种商品来源
| 来源方式 | 说明 |
|---|---|
| 指定选择商品 | 手动搜索并挑选商品，支持拖拽排序 |
| 商品分类 | 选择一个分类，自动拉取该分类下的商品 |
| 访问量排行 | 按商品访问量从高到低自动取数 |
| 销量排行 | 按商品销量从高到低自动取数 |
📐 丰富的配置选项
| 配置项 | 说明 |
|---|---|
| 标题与描述 | 支持多语言标题和富文本描述 |
| 产品总数量 | 可设置 1~50 个商品 |
| PC端每排数量 | 可设置 1~6 个 |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
| 查看更多文案 | 自定义按钮文字（支持多语言） |
| 查看更多链接 | 自定义跳转链接（分类来源时自动链接到所选分类） |
🛒 商品卡片特性
-
商品图片：复用系统商品卡片组件，包含图片、名称、价格
-
折扣角标：自动计算折扣百分比，以品牌色旗形角标展示
-
鼠标悬停：遵循系统默认的商品卡片悬停效果
技术特点
-
✅ 平滑横向轮播：基于原生 scroll-snap，滚动流畅自然
-
✅ 纯 CSS 切换箭头：不依赖图标字体，品牌色悬停反馈
-
✅ 响应式设计：PC 端按设置列数显示，平板 2 列，手机约 1.4 列（露出下一张）
-
✅ 折扣角标自动计算：根据原价与售价自动计算并展示折扣百分比
-
✅ 按钮智能显示：「查看更多」仅当文案和链接同时存在时显示
-
✅ 分类智能链接：选择商品分类来源时，「查看更多」自动链接到该分类页
-
✅ 性能优化：懒加载图片，ResizeObserver 动态调整箭头状态
-
✅ 装修编辑器完美支持：MutationObserver 监听 AJAX 注入的新模块，自动绑定轮播事件
适用场景
-
精选商品推荐
-
热门商品展示
-
限时促销商品轮播
-
新品发布展示
-
分类商品推荐墙
