English

Grid

グリッド

概要

グリッドエクステンションは、スライダーの中に行と列をもったグリッドを作成するための拡張機能です。下の例のように、それぞれのスライドに異なる数のグリッドをもたせることもできます。

  • 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

インストール

NPM

最新版をNPMから取得してください。

$ npm install @splidejs/splide-extension-grid

Splideを初期化する際、グリッドエクステンションをmount()メソッドに渡すと使用可能になります。

import { Splide } from '@splidejs/splide';
import { Grid } from '@splidejs/splide-extension-grid';


new Splide( '#splide' ).mount( { Grid } );
JavaScript

CDNまたはホスティング

jsDelivrから最新ファイルへのURLを取得するか、あるいはこのディレクトリからファイルをダウンロードし、<script>タグを用いてサイトにインポートしてください。

<script src="path-to-the-script/splide-extension-grid.min.js"></script>
HTML

Splideを初期化する際、window.splide.Extensionsを渡せば準備完了です。

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

オプション

次のように、コンストラクタにgridオプションを渡して調整します。

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

rows

rows: number

行の数を決定します。

cols

cols: number

列の数を決定します。

dimensions

dimensions: [ number, number ][]

行列を含むタプルの配列です。たとえば[ [ 1, 1 ], [ 2, 2 ] ]を指定すると、最初のスライドには1×1のグリッドが、残りのスライドには2×2のグリッドが作られます。このオプションを与えると、上記rowsとcolsの値は無視されます。

gap

gap: { row?: number | string, col?: number | string }

行間と列間の余白を定義します。CSSの相対単位も有効です。

{
  grid {
    gap: {
      row: '1rem',
      col: '1rem',
    },
  },
}
JavaScript

ブレークポイント

グリッドは幅をとりますので、ウィンドウサイズに応じて数を減らしたり、あるいはグリッドそのものを無効にする必要性が出てくるかもしれません。グリッドオプションはブレークポイントに対応していますので、このようなケースに柔軟に対応できます。falseを設定すれば、グリッド自体を無効にできます。

new Splide( '#splide', {
  grid: {
		rows: 3,
		cols: 3,
  },
  breakpoints: {
		800: {
			grid: {
				rows: 2,
				cols: 2,
			},
		},
		600: {
			grid: false,
		},
  },
} );
JavaScript