{"id":50709220,"url":"https://github.com/coowinit/responsive-product-swatch-gallery","last_synced_at":"2026-06-09T14:01:46.017Z","repository":{"id":359471740,"uuid":"1225448643","full_name":"coowinit/responsive-product-swatch-gallery","owner":"coowinit","description":"一个响应式产品图库，包含 Swiper 轮播、缩略图导航、色卡切换、悬停遮罩和原位图片放大效果。","archived":false,"fork":false,"pushed_at":"2026-05-22T02:02:39.000Z","size":105,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-22T11:37:15.165Z","etag":null,"topics":["bootstrap","color-swatches","css","frontend","html","image-gallery","javascript","product-gallery","responsive-design","swiper","thumbnail-slider"],"latest_commit_sha":null,"homepage":"https://coowinit.github.io/responsive-product-swatch-gallery/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coowinit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-30T09:35:26.000Z","updated_at":"2026-05-22T02:02:44.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/responsive-product-swatch-gallery","commit_stats":null,"previous_names":["coowinit/responsive-product-swatch-gallery"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/responsive-product-swatch-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fresponsive-product-swatch-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fresponsive-product-swatch-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fresponsive-product-swatch-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fresponsive-product-swatch-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/responsive-product-swatch-gallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fresponsive-product-swatch-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34110012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","color-swatches","css","frontend","html","image-gallery","javascript","product-gallery","responsive-design","swiper","thumbnail-slider"],"created_at":"2026-06-09T14:01:45.081Z","updated_at":"2026-06-09T14:01:46.010Z","avatar_url":"https://github.com/coowinit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Responsive Product Color Swatch Gallery\n\n一个基于 **Bootstrap 5 + Swiper** 的产品色卡图片轮播组件。左侧为场景大图轮播，支持缩略图导航和点击放大；右侧为色卡列表，点击色卡后会切换左侧对应的一组场景图片。\n\n当前版本已新增 **顶部多选过滤按钮（Filter By）**：过滤按钮统一放在组件最上方，用户可以通过 `All / SunComfortable / Fire-Rated / Popular / Browns / Greys / Neutrals / Reds` 等标签快速筛选右侧色卡。适合产品详情页、地板/墙板/户外地板/色卡展示等场景。\n\n## 功能特点\n\n- 左侧大图 Swiper 轮播\n- 底部缩略图与主图联动\n- 右侧色卡点击切换对应场景图片组\n- 默认选中第一张色卡\n- 当前色卡绿色边框高亮\n- 色卡 hover 时显示半透明遮罩和白色色卡名称\n- 大图点击后在当前图片窗口内放大查看\n- 鼠标移动时自动调整放大位置\n- 手机端自适应布局，色卡保持 3 列显示\n- 顶部新增 `Filter By` 色卡过滤按钮区域\n- 支持 `All` 一键恢复显示全部色卡\n- 支持多个过滤条件同时选中\n- 支持按功能标签筛选，例如 `SunComfortable`、`Fire-Rated`、`Popular`\n- 支持按颜色系筛选，例如 `Browns`、`Greys`、`Neutrals`、`Reds`\n- 过滤后右侧色卡自动刷新\n- 如果当前选中的色卡被过滤隐藏，会自动切换到过滤结果中的第一个色卡\n- 没有匹配结果时显示 `No matching colors.`\n- Bootstrap、Swiper、CSS、JS、图片均为本地文件，方便上传到 GitHub Pages 或集成到现有网站\n\n## 当前效果结构\n\n```text\n顶部 Filter By 多选过滤按钮\n\n左侧主图轮播区域        右侧色卡列表区域\n底部缩略图导航          点击色卡切换左侧图片组\n```\n\n过滤按钮已经从右侧色卡区域移动到整个组件的最上方，视觉结构更清晰，也更适合后期放到产品详情页的主图库模块中。\n\n## 项目结构\n\n```text\n.\n├── index.html\n├── css/\n│   ├── bootstrap.min.css\n│   ├── swiper-bundle.min.css\n│   └── style.css\n├── js/\n│   ├── gallery.js\n│   └── swiper-bundle.min.js\n└── images/\n    ├── scenes/\n    │   ├── ash-wood-1.svg\n    │   ├── ash-wood-2.svg\n    │   └── ...\n    └── swatches/\n        ├── ash-wood.svg\n        ├── blue-black.svg\n        └── ...\n```\n\n## 快速预览\n\n直接用浏览器打开：\n\n```text\nindex.html\n```\n\n不需要安装 Node.js，也不需要构建工具。\n\n## 如何修改色卡和图片\n\n主要数据在：\n\n```text\njs/gallery.js\n```\n\n在 `deckGalleryData` 中添加、删除或修改色卡：\n\n```js\n{\n  id: 'teak',\n  name: 'Teak',\n  swatch: 'images/swatches/teak.svg',\n  images: [\n    'images/scenes/teak-1.svg',\n    'images/scenes/teak-2.svg',\n    'images/scenes/teak-3.svg',\n    'images/scenes/teak-4.svg'\n  ],\n  tags: ['Browns', 'Popular']\n}\n```\n\n字段说明：\n\n- `id`：色卡唯一标识，不要重复。\n- `name`：色卡名称，会用于 hover 遮罩文字和图片 alt 文本。\n- `swatch`：右侧色卡图片路径。\n- `images`：左侧对应的场景大图列表，同时会生成底部缩略图。\n- `tags`：该色卡所属的过滤分类，可用于顶部过滤按钮筛选。\n\n## 如何修改过滤按钮\n\n过滤按钮相关内容主要在：\n\n```text\njs/gallery.js\n```\n\n每个色卡通过 `tags` 字段绑定分类。例如：\n\n```js\ntags: ['Browns', 'Popular']\n```\n\n这样该色卡会同时出现在 `Browns` 和 `Popular` 的筛选结果中。\n\n当前过滤按钮包括：\n\n```text\nAll\nSunComfortable\nFire-Rated\nPopular\nBrowns\nGreys\nNeutrals\nReds\n```\n\n### 过滤逻辑\n\n当前默认逻辑是：**选中多个过滤项时，只要色卡命中任意一个标签，就会显示。**\n\n也就是：\n\n```text\nBrowns + Popular = 显示 Browns 或 Popular 中的色卡\n```\n\n如果后期想改成“必须同时满足所有选中的标签才显示”，可以在 `js/gallery.js` 中找到：\n\n```js\nvar FILTER_MATCH_MODE = 'any';\n```\n\n改成：\n\n```js\nvar FILTER_MATCH_MODE = 'all';\n```\n\n修改后逻辑会变成：\n\n```text\nBrowns + Popular = 只显示同时属于 Browns 且 Popular 的色卡\n```\n\n## 如何调整过滤按钮位置\n\n过滤按钮现在位于整个组件最上方，结构大致为：\n\n```html\n\u003cdiv class=\"deck-filter-top\"\u003e\n  ...\n\u003c/div\u003e\n\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-lg-6\"\u003e\n    左侧主图轮播\n  \u003c/div\u003e\n\n  \u003cdiv class=\"col-lg-6\"\u003e\n    右侧色卡列表\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n相关样式主要在：\n\n```text\ncss/style.css\n```\n\n重点关注：\n\n```css\n.deck-filter-top {\n  ...\n}\n```\n\n如果后期希望恢复为右侧布局，可以把过滤区域移动回右侧色卡列表上方。\n\n## 如何替换成真实图片\n\n把真实图片放到对应文件夹：\n\n```text\nimages/swatches/   色卡图片\nimages/scenes/     场景大图\n```\n\n然后修改 `js/gallery.js` 里的路径即可。\n\n建议尺寸：\n\n- 场景大图：`800 x 600` 或同等 4:3 比例\n- 色卡图：`400 x 300` 或同等 4:3 比例\n\n如果使用其他比例，也可以在 `css/style.css` 中调整：\n\n```css\n.deck-main-swiper {\n  aspect-ratio: 4 / 3;\n}\n\n.deck-swatch img {\n  aspect-ratio: 4 / 3;\n}\n```\n\n## 样式自定义\n\n主要样式在：\n\n```text\ncss/style.css\n```\n\n常用修改位置：\n\n```css\n/* 色卡选中绿色边框 */\n.deck-swatch.is-active::after {\n  border: 4px solid #08a66a;\n}\n\n/* 色卡 hover 半透明背景 */\n.deck-swatch-title {\n  background: rgba(0, 0, 0, 0.45);\n}\n\n/* 左侧大图比例 */\n.deck-main-swiper {\n  aspect-ratio: 4 / 3;\n}\n\n/* 手机端色卡列数 */\n@media (max-width: 575px) {\n  .deck-swatches {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n```\n\n## 本次更新记录\n\n### v1.1.0 - 顶部多选过滤按钮\n\n本次更新重点是为色卡点击切换效果增加更清晰的过滤功能。\n\n更新内容：\n\n- 新增顶部 `Filter By` 过滤按钮区域。\n- 过滤按钮从右侧移动到整个组件最上方。\n- 新增 `All` 按钮，用于一键重置过滤条件。\n- 新增功能类筛选：`SunComfortable`、`Fire-Rated`、`Popular`。\n- 新增颜色系筛选：`Browns`、`Greys`、`Neutrals`、`Reds`。\n- 支持多个过滤条件同时选中。\n- 支持 `any` 和 `all` 两种过滤匹配模式。\n- 过滤后色卡区域会自动刷新。\n- 当前选中色卡被过滤隐藏时，会自动切换到第一个可见色卡。\n- 无匹配色卡时显示空状态提示。\n- 更新 `index.html`、`css/style.css`、`js/gallery.js` 三个核心文件。\n\n### v1.0.0 - 基础色卡图库组件\n\n初始版本功能：\n\n- 左侧产品场景图 Swiper 轮播。\n- 底部缩略图导航。\n- 右侧色卡点击切换对应图片组。\n- 色卡选中高亮。\n- 色卡 hover 显示名称。\n- 大图点击放大查看。\n- 响应式布局。\n- 本地化依赖文件，方便上传到 GitHub Pages。\n\n## 上传到 GitHub Pages\n\n1. 新建 GitHub 仓库。\n2. 上传本项目所有文件到仓库根目录。\n3. 进入仓库 `Settings`。\n4. 打开 `Pages`。\n5. `Build and deployment` 选择：\n   - Source: `Deploy from a branch`\n   - Branch: `main`\n   - Folder: `/root`\n6. 保存后等待 GitHub Pages 自动部署。\n\n## 依赖说明\n\n当前项目使用本地文件引用：\n\n- Bootstrap 5.3.3\n- Swiper 11.2.10\n- 原生 JavaScript\n\n页面不依赖 jQuery。\n\n## 适用场景\n\n- 产品详情页图库\n- 色卡选择器\n- 户外地板颜色展示\n- 墙板、地板、家具材质展示\n- 电商产品多颜色/多纹理预览\n- 带功能标签和颜色分类的产品筛选展示\n\n## License\n\n可根据你的项目需要自行添加许可证，例如 MIT License。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fresponsive-product-swatch-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Fresponsive-product-swatch-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fresponsive-product-swatch-gallery/lists"}