How to Create a Grid Slider in Bricks

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/

https://splidejs.com/extensions/grid/