Grid Splide Slider

This is the basic how-to for a grid slider using Splide on a Bootstrap 5 site. It should be set up fully by default, but in case it isn’t, here’s how you can manually get it working.

gulpfile.js

First, in your gulpfile.js within the gulp.series 'clean-plugins' section (maybe around line 369), you should already have one line for Splide in place. Copy-and-paste the following line to include another extension for Splide grids.

gulp.src('./node_modules/@splidejs/splide-extension-grid/dist/js/splide-extension-grid.js').pipe(gulp.dest('./src/scripts/plugins/'));

package.json

Within your package.json, inside the devDependencies section, make sure that the "@splidejs/splide" line is up to date. As of this writing, that’s ^4.1.4, but you can check the Splide release notes to confirm the most recent version.

Then, include the following line to include the grid extenstion here as well: "@splidejs/splide-extension-grid": "^0.4.1", Just like before, make sure that the version number is up to date. You may want to install it with NPM instead–whichever you prefer!

sliders.js

From here, it’s all script and styling! Here’s the basic layout of how your JavaScript should look with a grid slider. There are some slight differences from a regular one-up hero slider, so make sure to check if you have issues.

Key things to note are the .mount(window.splide.Extensions); piece at the very end, and the lack of perPage definitions throughout–instead, everything is defined within the grid section. Also, make sure to set things like pagination and arrows to false until they’ll actually be needed, otherwise they’ll show unnecessarily.

if(document.querySelector(".icon__slider")) {
      new Splide( '.icon__slider', {
         type: 'slider',
         trimSpace    : true,
         arrows       :false,
         pagination   : false,
         accessibility:!inCms,
         drag         : false,
         grid: {
            rows: 2,
            cols: 6,
            gap: {
               row: '35px',
               cols: '35px',
            },
         },
         breakpoints  : {
            993: {
               drag: !inCms,
               pagination   :true,
               grid: {
                  rows: 2,
                  cols: 3,
                  gap: {
                     row: '35px',
                     cols: '35px',
                  },
               },
            },
            767: {
               pagination: true,
               perPage: 2,
               grid: {
                  rows: 1,
                  cols: 1,
                  gap: {
                     row: '35px',
                     cols: '35px'
                  }
               }
            }
         }
      } ).mount(window.splide.Extensions);
   }

Example Sites

• Riverview Bank 2022

Tags: splide, slider, BS5, javascript, js, json