本教程教你如何在 Bricks 默认的嵌套轮播（nested slider）里做出多行多列的网格布局。Bricks 的轮播底层用的是 SplideJS，它正好提供了一个非常方便的 Grid 扩展来处理自定义网格。
目录
获取轮播的 JSON 对象
先按正常方式搭建嵌套轮播，配好所有需要的选项。
给嵌套轮播元素加上 grid-slider 类：
保存并查看前端，你会看到类似这样的结构：
把 data-splide 属性里的内容全部复制出来——这是一个 JSON 对象，包含了你给轮播设置的所有参数。
回到构建器，把轮播的 options type（选项类型） 改为 Custom（自定义），把刚才的 JSON 对象粘贴到 Custom Options（自定义选项） 字段里：
然后手动把 Grid 选项加进去，追加下面这段代码：
"grid":{
"rows":"2",
"cols":"4",
"gap":{
"row":"1rem",
"col":"1rem"
}
}这里设置的是 2 行 4 列，网格项之间 1rem 间距。
最终的 JSON 对象应该长这样：
加载 JS 文件
渲染网格要用 SplideJS 官方提供的 Grid Extension。
首先下载 splide-extension-grid.min.js，通过子主题或代码片段插件加载到站点。
确保它在 SplideJS 主库之后加载。
然后加载下面这段代码：
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，保证行能正确换行：
.brxe-slider-nested.grid-slider .splide__slide {
flex-wrap: wrap;
}处理断点
你可能需要给不同断点设置不同的网格。SplideJS 的 Grid Extension 完美支持这一点，只需在 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 对象：
"grid":{
"dimensions":[
[
2,
2
],
[
3,
3
]
],
"gap":{
"row":"1em",
"col":"1em"
}
}这个例子里，第一张幻灯片是 2×2，第二张是 3×3。数组第一个参数是行数，第二个是列数。
如果轮播每次显示 2 张幻灯片，效果就是这样：
注意：dimensions 选项会覆盖 rows 和 cols 选项。
处理图片的小技巧
作者在测试时发现图片容易出小问题。要保证图片在网格内正确填充，记得把图片的 height 或 max-height 设为 100%。