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

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/

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

6 comments

  • Victor López

    I'm using BricksExtra's Pro Slider + Pro Slider Gallery to output the images of a Meta Box's Image Advanced type field and it's working. Now... I would like to create a Grid Layout but there's not an Option's tab to set to 'Custom' and add the additional settings to make it work. Any workaround for this?

    • A
      David Browne

      Hi Victor, to completely override all the Pro Slider options and add in custom from Splide, it can be done like this..

      https://gist.github.com/wplit/e7c8a37c8d1e92c46fc299955db0c526

      However, I stress that I personally don't recommend doing this. I find Splide's grid option causes a lot of FOUC, as the layout is being controlled via JS, where the which will happen after the page has loaded. it's not something I can provide support for, even if using the Pro Slider as it means you're overiding everything we added, and going custom instead. But the code above is how to do it, if you want to go that route and add custom options such as grid.

      (you'd still need to enqueue the JS files as shown in the tutorial.

      • Victor López

        Sorry to keep bothering about this David but could you please help me pointing out:

        "Thank you for your response David!

        I understand your concern on overriding the code and I share it. In that case, which will be your workaround to reproduce this:
        https://imgur.com/a/qotizqh

        Please take in consideration that the media should be dynamically pulled from a MB's Image Advanced type field (or similar). I'm unable to get the dynamic data with Brick's Slider (Nestable) element."

        • A
          David Browne

          Hi Victor,

          The code I gave was the workaround, as you asked how to do this with BricksExtras, where this type of grid isn't supported. But it's possible by adding that code, which is the equivalent of using the custom options.

          To create the grid without BricksExtras, you'd use Splide custom options as shown in the tutorial. It'd need to be created manually via the Splide options and grid extension.

      • Victor López

        Thank you for your response David!

        I understand your concern on overriding the code and I share it. In that case, which will be your workaround to reproduce this:
        https://imgur.com/a/qotizqh

        Please take in consideration that the media should be dynamically pulled from a MB's Image Advanced type field (or similar). I'm unable to get the dynamic data with Brick's Slider (Nestable) element.

  • OlegTix

    Thank you very much!

Leave your comment