Grid

Overview

The Grid extension creates rows and columns in the carousel. Each slide can have each dimension like this example:

Installation

NPM

Get the latest version by NPM:

$ npm install @splidejs/splide-extension-grid

$ npm install @splidejs/splide-extension-grid

Mount the extension to Splide:

import { Splide } from '@splidejs/splide';
import { Grid } from '@splidejs/splide-extension-grid';

new Splide( '#splide' ).mount( { Grid } );
JavaScript

import { Splide } from '@splidejs/splide';
import { Grid } from '@splidejs/splide-extension-grid';


new Splide( '#splide' ).mount( { Grid } );

CDN or Hosting Files

Visit jsDelivr and get the link of the latest file or download the file from the dist directory. And then, import the minified script on your site:

<script src="path-to-the-script/splide-extension-grid.min.js"></script>
HTML

<script src="path-to-the-script/splide-extension-grid.min.js"></script>

After that, mount the extension to Splide:

new Splide( '#splide' ).mount( window.splide.Extensions );
JavaScript

new Splide( '#splide' ).mount( window.splide.Extensions );

Options

Pass the grid option to the constructor:

new Splide( '#splide', {
  grid: {
		rows: 2,
		cols: 2,
		gap : {
			row: '1rem',
			col: '1.5rem',
		},
  },
} );
JavaScript

new Splide( '#splide', {
  grid: {
		rows: 2,
		cols: 2,
		gap : {
			row: '1rem',
			col: '1.5rem',
		},
  },
} );

rows

rows: number

The number of rows.

cols

cols: number

The number of columns.

dimensions

dimensions: [ number, number ][]

Collection of dimensions (rows and cols) as an array. If the value is [ [ 1, 1 ], [ 2, 2 ] ], the first slide will be 1×1 and next all slides will be 2×2. The extension ignores rows and cols options if this option is available.

gap

gap: { row?: number | string, col?: number | string }

Gaps for rows or cols. CSS relative units are acceptable.

{
  grid {
    gap: {
      row: '1rem',
      col: '1rem',
    },
  },
}
JavaScript

{
  grid {
    gap: {
      row: '1rem',
      col: '1rem',
    },
  },
}

Breakpoints

You might need to reduce the number of cells or disable the grid mode in mobile devices. The grid option can respond with breakpoints. Set the option to false to disable the mode:

new Splide( '#splide', {
  grid: {
		rows: 3,
		cols: 3,
  },
  breakpoints: {
		800: {
			grid: {
				rows: 2,
				cols: 2,
			},
		},
		600: {
			grid: false,
		},
  },
} );
JavaScript

new Splide( '#splide', {
  grid: {
		rows: 3,
		cols: 3,
  },
  breakpoints: {
		800: {
			grid: {
				rows: 2,
				cols: 2,
			},
		},
		600: {
			grid: false,
		},
  },
} );