日本語

Grid

You're browsing the documentation for v3

Overview

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

  • 16
  • 17
  • 18
  • 19
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 01
  • 02
  • 03
  • 04

Installation

NPM

Get the latest version by NPM:

$ 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

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

After that, mount the extension to Splide:

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

Options

Pass the grid option to the constructor:

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

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

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