Grid – Splide

By adding splide-extension-grid to Splide, a slider can have rows and columns. Multiple dimensions are accepted in a same slider.

Demo

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

new Splide( '#splide', {
	type       : 'loop',
	height     : '14rem',
	perPage    : 2,
	perMove    : 1,
	grid       : {
		// You can define rows/cols instead of dimensions.
		dimensions: [ [ 1, 1 ], [ 2, 2 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ], [ 3, 2 ] ],
		gap: [
			row: '6px',
			col: '6px',
		],
	},
	breakpoints: {
		600: {
			height : '8rem',
			perPage: 1,
			grid   : {
				dimensions: [ [ 2, 2 ], [ 1, 1 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ] ],
			}
		}
	}
} ).mount( { Grid } );

Installation

NPM(Recommended)

Get the latest extension by NPM:

$ npm install @splidejs/splide-extension-grid

Mount the extension to the Splide:

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 drectory. Then import the minified JavaScript file on your site:

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-grid@0.1.2/dist/js/splide-extension-grid.min.js">

Note that version numbers above are incorrect. Please use the latest version.

After including files, mount the extension to the Splide:

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

Extensions are stored in the splide global object. Be aware of conflict against your local variables when omitting window.

Options

Pass grid as an object to options like this:

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

`rows`

Number of rows.

type: number default: 1

`cols`

Number of columns.

type: number default: 1

`dimensions`

Collection of dimensions(rows and columns) as an array. If the value is [ [ 1, 1 ], [ 2, 2 ] ], the first slide will be 11 grid and next all slides will be 22. rows and cols options are ignored when this option is provided.

type: Array|boolean default: false

`gap`

Gap size for rows and columns as an object. CSS relative units are accepted.

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

type:Object default: {}

Breakpoints

You might need to reduce grid size or disable grid mode in mobile devices. Grid options can be changed through breakpoints:

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

If you want to disable grid mode, set false to grid option:

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