Elementor Product Carousel

一个轻量级的 Elementor 商品轮播插件，专为简化商品展示而设计。

项目背景

本插件是为了帮助朋友更方便地完成工作而开发的。旨在替代复杂的第三方 Elementor 轮播插件，提供简洁直观的操作体验。

重要声明

1. 本人 songshan 并非专业的 WordPress 插件开发者
2. 该插件完全由 Claude Sonnet 4.5 AI 模型开发完成
3. songshan 仅提供开发思路和需求说明
4. 其他开发者可以自由扩展和修改本插件
5. 如有 bug 或问题，概不负责

功能特性

• Repeater 控制器，直接在编辑器中添加商品
• 完整的响应式支持（桌面/平板/手机）
• 灵活的尺寸控制（轮播框、图片）
• 智能分页移动功能
• 自动播放配置（秒级控制）
• 丰富的样式定制选项
• PHP 8.2+ 严格兼容

系统要求

• WordPress 6.0+
• PHP 8.2+
• Elementor 3.0+

安装方法

通过 Git Clone

cd /path/to/wordpress/wp-content/plugins/
git clone https://github.com/yourusername/elementor-product-carousel.git

手动安装

1. 下载本仓库的压缩包
2. 解压到 WordPress 的 wp-content/plugins/ 目录
3. 确保文件夹名称为 elementor-product-carousel

使用方法

1. 激活插件

• 登录 WordPress 后台
• 进入 插件 页面
• 找到 "Elementor Product Carousel"
• 点击 激活

2. 添加轮播

• 打开 Elementor 编辑器
• 在左侧 Widget 列表中搜索 "商品轮播"
• 将 Widget 拖到页面中

3. 配置商品

在"商品项目"部分：

• 点击"添加项目"按钮
• 上传商品图片
• 输入商品标题和描述
• 设置商品链接（可选）

4. 配置轮播设置

在"轮播设置"部分：

• 桌面端列数：设置桌面显示的列数（1-6）
• 平板端列数：设置平板显示的列数（1-6）
• 手机端列数：设置手机显示的列数（1-3）
• 自动播放：开启/关闭自动播放
• 自动播放间隔：设置切换间隔（1-60秒）
• 循环播放：是否循环播放
• 商品间距：设置商品之间的间距

5. 调整尺寸

在"轮播框尺寸"部分：

• 轮播框高度：设置容器高度（200-1000px）
• 轮播框宽度：设置容器宽度（50-100%）

在"商品图片尺寸"部分：

• 图片最小宽度：50-500px
• 图片最大宽度：100-1000px
• 图片高度：100-800px

6. 自定义样式

在"样式"选项卡：

• 图片长宽比：1:1, 4:3, 16:9, 3:4, 9:16
• 卡片背景色、边框、阴影
• 标题和描述的颜色、字体、对齐方式

7. 保存发布

• 点击"保存"按钮
• 点击"发布"按钮
• 在前台查看效果

智能分页功能

点击导航箭头时，会根据当前显示列数一次性移动对应数量的商品：

• PC端显示3列 → 点击箭头移动3个商品
• 平板显示2列 → 点击箭头移动2个商品
• 手机显示1列 → 点击箭头移动1个商品

技术栈

• PHP 8.2+ (严格类型声明)
• Elementor Widget API
• Swiper.js (Elementor 内置)
• CSS3 (aspect-ratio, object-fit)
• Vanilla JavaScript

文件结构

elementor-product-carousel/
├── elementor-product-carousel.php      # 主入口文件
├── includes/
│   ├── class-plugin.php                # 插件主类
│   └── widgets/
│       └── class-product-carousel.php  # Widget 核心类
├── assets/
│   ├── css/
│   │   └── carousel.css                # 样式文件
│   └── js/
│       └── carousel.js                 # JavaScript 脚本
├── languages/
│   └── elementor-product-carousel.pot  # 翻译文件
└── readme.txt                          # WordPress 插件说明

版本历史

v1.2.0 (2026-03-21)

• 添加智能分页移动功能
• 优化响应式配置

v1.1.0 (2026-03-21)

• 添加轮播框尺寸控制
• 添加商品图片尺寸控制
• 改进自动播放秒数设置

v1.0.0 (2026-03-21)

• 初始版本发布
• 基础商品轮播功能
• PHP 8.2 兼容

常见问题

如何更改轮播速度？

在"轮播设置"中找到"自动播放间隔"，设置秒数（1-60秒）。

如何更改一行显示的商品数量？

在"轮播设置"中分别设置桌面、平板、手机的列数。

图片会被拉伸吗？

不会。插件使用 object-fit: cover 属性，图片会自动裁剪以保持比例。

支持哪些浏览器？

Chrome 90+, Firefox 88+, Safari 14+, Edge 90+, 移动浏览器。

扩展开发

本插件采用标准的 WordPress 插件架构，开发者可以自由扩展功能：

• 添加更多轮播效果
• 集成 WooCommerce 产品数据
• 添加商品价格和评分显示
• 添加购物车按钮
• 添加更多样式预设

扩展时请遵循：

• WordPress 编码规范
• PHP 8.2+ 兼容性
• 完整的类型声明
• 适当的安全转义

已知限制

1. 图片数量建议不超过 20 个（性能考虑）
2. 不支持 IE 11 浏览器
3. 仅支持 Elementor 的标准响应式断点

许可证

GPL v2 or later

本插件是自由软件，您可以在 GNU 通用公共许可证的条款下重新分发和修改它。

免责声明

本插件按"原样"提供，不提供任何明示或暗示的保证。使用本插件的风险由用户自行承担。开发者不对使用本插件导致的任何损失或损害负责。

贡献

欢迎其他开发者贡献代码或提出改进建议。

作者

• 思路提供：songshan
• 开发：Claude Sonnet 4.5
• 完成时间：2026-03-21

---

最后更新：2026-03-23