在 Bricks 中创建网格轮播

“目录”

• text: “获取轮播的 JSON 对象”

• text: “加载 JS 文件”

• text: “CSS”

• text: “处理断点”

• text: “每张幻灯片自定义网格”

• text: “处理图片的小技巧”

— 本教程教你如何在 Bricks 默认的嵌套轮播（nested slider）里做出多行多列的网格布局。Bricks 的轮播底层用的是 SplideJS，它正好提供了一个非常方便的 Grid 扩展来处理自定义网格。 ## 目录 - 获取轮播的 JSON 对象

• 加载 JS 文件

• CSS

• 处理断点

• 每张幻灯片自定义网格

• 处理图片的小技巧 ## 获取轮播的 JSON 对象 先按正常方式搭建嵌套轮播，配好所有需要的选项。 给嵌套轮播元素加上 grid-slider 类： 保存并查看前端，你会看到类似这样的结构： 把 data-splide 属性里的内容全部复制出来——这是一个 JSON 对象，包含了你给轮播设置的所有参数。 回到构建器，把轮播的 options type（选项类型） 改为 Custom（自定义），把刚才的 JSON 对象粘贴到 Custom Options（自定义选项） 字段里： 然后手动把 Grid 选项加进去，追加下面这段代码： json "grid":{ "rows":"2", "cols":"4", "gap":{ "row":"1rem", "col":"1rem" } } 这里设置的是 2 行 4 列，网格项之间 1rem 间距。 最终的 JSON 对象应该长这样： ## 加载 JS 文件 渲染网格要用 SplideJS 官方提供的 Grid Extension。 首先下载 splide-extension-grid.min.js，通过子主题或代码片段插件加载到站点。 确保它在 SplideJS 主库之后加载。 然后加载下面这段代码： javascript document.addEventListener('DOMContentLoaded', () => { // Query all the grid sliders on the page const sliders = document.querySelectorAll('.grid-slider'); // Stop the function if there is no sync slider if (sliders.length < 1) return; // Debounce function const debounce = (fn, threshold) => { var timeout; threshold = threshold || 200; return function debounced() { clearTimeout(timeout); var args = arguments; var _this = this; function delayed() { fn.apply(_this, args); } timeout = setTimeout(delayed, threshold); }; }; // Init function const init = sliderId => { // get the slider instance const instance = bricksData.splideInstances[sliderId]; // destroy the actual instance instance.destroy(true); // Remount the slider using the Grid extension instance.mount(window.splide.Extensions); }; // Loop into each wrapper sliders.forEach(slider => { const sliderId = slider.dataset.scriptId; // Run the function on load setTimeout(() => { init(sliderId); }, 0); // Rerun the function on resize because bricks reinit the sliders on each resize event window.addEventListener("resize", debounce(() => { init(sliderId); }, 300)); }); }); 脚本逻辑：页面加载时通过 bricksData.splideInstances[sliderId] 拿到每个轮播的实例，销毁后用 Grid 扩展重新挂载；因为 Bricks 每次 resize 都会重初始化轮播，所以监听 resize 事件、用 300ms 防抖重新执行 init。 ## CSS 还需要加一段 CSS，保证行能正确换行： css .brxe-slider-nested.grid-slider .splide__slide { flex-wrap: wrap; } ## 处理断点 你可能需要给不同断点设置不同的网格。SplideJS 的 Grid Extension 完美支持这一点，只需在 JSON 对象里加这段代码： json "grid":{ "rows":3, "cols":3 }, "breakpoints":{ "800":{ "grid":{ "rows":2, "cols":2 } }, "600":{ "grid":false } } 效果：桌面端 3×3 网格，宽度小于 800px 时变为 2×2，小于 600px 时禁用网格。 ## 每张幻灯片自定义网格 借助 Grid 扩展的 dimensions 选项，你可以给每张幻灯片单独设置网格。修改 JSON 对象： ```json “grid”:{ “dimensions”:[ [ 2, 2 ], [ 3, 3 ] ], “gap”:{ “row”:“1em”, “col”:“1em” } }

>



- [Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）](/blog/a-css-approach-to-content-switcher-in-bricks/)



- [Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表](/blog/acf-checkbox-svg-bullets/)



- [Bricks 按 ACF Gallery 图片数量做动态条件输出](/blog/acf-gallery-images-count-condition/)



## 处理图片的小技巧 作者在测试时发现图片容易出小问题。要保证图片在网格内正确填充，记得把图片的 **height 或 max-height 设为 100%**。 ### 参考资料 - [https://www.freecodecamp.org/news/javascript-debounce-example/](https://www.freecodecamp.org/news/javascript-debounce-example/)



- [https://splidejs.com/extensions/grid/](https://splidejs.com/extensions/grid/)

## 常见误区

几个坑：一是网格里图片不设 `height/max-height:100%`，在格子内填不满或溢出，本文已点出；二是 slide 数量多时一次性全加载，首屏拉重，按需懒加载或限制可见数；三是移动端网格列数没降，小屏挤成一列却图太小或太挤，断点下调列数。网格轮播适合作品集/产品墙，格子统一比例（用 aspect-ratio）最稳，别让图片高矮不齐。

## 延伸阅读

- 想要现成外贸独立站，从零搭出能收询盘的站？看 [铲子铺 chanzipu 的外贸建站教程](https://chanzipu.com/)（同用 Bricks）

## 常见问题（FAQ）

**图片填不满格子怎么办？** 把图片 height 或 max-height 设为 100%，对象适配用 cover，填满不溢出。

**slide 多会拖慢首屏吗？** 会，按需懒加载或限制初始可见数量，别一次性全加载。

**移动端怎么调？** 断点下减少网格列数，避免小屏挤成一团或图太小。

**格子高矮不齐怎么统一？** 给格子设统一 aspect-ratio，图片用 cover 裁切，视觉才整齐。
- 相关阅读：[Bricks Setup Guide](/blog/bricks-setup-guide/)

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程