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,
}
},
} );