Package Exports

@splidejs/splide-extension-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@splidejs/splide-extension-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Grid - Splide Extension

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

Sample Slider

Demo and Document

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 links of the latest files or download files from the dist library.

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.

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.

@splidejs/splide-extension-grid