@splidejs/splide-extension-grid

Grid - Splide Extension

This is an extension of the Splide slider library for creating rows and cols in a slider.

• Demo and Document

Installation

NPM(Recommended)

1. Get the latest extension by NPM:

   $ npm install @splidejs/splide-extension-grid
   

2. 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

1. Visit jsDelivr and get the links of the latest files or download files from the dist library.
2. Import minified JavaScript files 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.
3. Mount the extension to the Splide.

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

Available Options

Pass grid as an object to options:

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

• rows: Number of rows.
• cols: Number of columns.
• dimensions: Set of dimensions(rows and cols) such as [ [ 1, 1 ], [ 2, 2 ] ]. rows and cols are ignored when this option is provided.
• gap: An object containing gap size for rows and cols.

License

Splide is released under the MIT license.
© 2020 Naotoshi Fujita