Have ideas to improve npm?Join in the discussion! »

    @splidejs/splide-extension-grid

    0.2.0 • Public • Published

    Grid - Splide Extension

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

    Sample Slider

    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

    Install

    npm i @splidejs/splide-extension-grid

    DownloadsWeekly Downloads

    347

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    62.4 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar