In this tutorial, we’ll learn how to create multiple rows and columns inside the default nested slider of Bricks.
Table of Contents
- Introduction
- Get the JSON object of your slider
- Enqueue the JS files
- The CSS
- Dealing with breakpoints
- Custom grid for each slide
- Quick tip when dealing with images
Introduction
A user recently asked in the Facebook group how can we create a grid of multiple items inside the nested slider element. Well, SplideJS offers a really handy extension to deal with custom grids.
Let’s dive in and see how to implement it in Bricks!
Get the JSON object of your slider
Build your nested slider normally, with all the options that you need.
Add the class grid-slider to your nested slider element.

Save your work and inspect the frontend. You’ll see something like this:

Copy all the content of the data-splide attribute. It’s a JSON object with all the parameters you set for your slider.
Now go back in the builder, change the options type of your slider to Custom and paste the JSON object inside the Custom Options field:

Let’s add the Grid options to it manually by adding the following code:
"grid":{
"rows":"2",
"cols":"4",
"gap":{
"row":"1rem",
"col":"1rem"
}
}
We are setting 2 rows and 4 columns, with 1rem of space gap between each item of the grid.
The JSON object should look like this:

Enqueue the JS files
To render the grid, we’ll use the Grid Extension provided by SplideJS (which is the JS library used by Bricks to generate the sliders).
First of all, download the splide-extension-grid.min.js and enqueue it to your site using either a child theme or a code snippets plugin.
Make sure it loads after the main SplideJS library.
Then enqueue the following code:
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));
});
});
The CSS
We also need to add this CSS to make sure the rows wrap correctly:
.brxe-slider-nested.grid-slider .splide__slide {
flex-wrap: wrap;
}
Dealing with breakpoints
You may need to set different grids for different breakpoints. The Grid Extension of SplideJS handles it perfectly. You’ll need to add this code to your JSON object:
"grid":{
"rows":3,
"cols":3
},
"breakpoints":{
"800":{
"grid":{
"rows":2,
"cols":2
}
},
"600":{
"grid":false
}
}
It will create a 3×3 grid on desktop, then resize it to 2×2 for devices smaller than 800px, and finally disable the grid option for devices smaller than 600px.
Custom grid for each slide
With the grid extension, you are able to set custom grids for each slide using the dimensions option.
Let’s modify our JSON object:
"grid":{
"dimensions":[
[
2,
2
],
[
3,
3
]
],
"gap":{
"row":"1em",
"col":"1em"
}
}
In this example, the first slide will be 2×2 and the second slide will be 3×3. The first parameter of the array is the row number, the second one is the column number.
If we display 2 slides to show on our slider, this will be the result:

Note: the dimensions option overrides the rows and cols options.
Quick tip when dealing with images
During my tests, I run into small issues when dealing with images. To make sure the images fit inside the grid, make sure to set the height or max-height of the images to 100%.
Resources
https://www.freecodecamp.org/news/javascript-debounce-example/
1 comment
OlegTix
Thank you very much!