Слайды сеткой

Tvist позволяет располагать слайды в виде сетки (Grid). Это удобно для создания галерей или списков карточек.

В подборке ниже карточки с текстом и декоративными элементами собраны в сетку 2 × 2. На узком экране остаётся одна колонка и два ряда. Последняя страница показывает, что неполная сетка сохраняет размеры ячеек.

Живой пример

Слайды сеткой

6 слайдов

HTML, CSS и JS в этих вкладках используются в предпросмотре.

Настроить свой →

Использование

Для включения режима сетки используйте опцию grid.

Переменные размеры страниц (Dimensions)

С помощью опции dimensions вы можете задавать разные размеры для каждой страницы слайдера. Каждый элемент массива [rows, cols] определяет количество рядов и колонок на одной странице. Слайды последовательно распределяются по этим страницам. Массив применяется циклически.

В журнальном примере чередуются четыре страницы: обложка во весь кадр, две широкие карточки друг над другом, две вертикальные карточки рядом и заключительная обложка. На мобильном экране парные карточки располагаются друг под другом.

Живой пример

Сетка разных размеров

6 слайдов

HTML, CSS и JS в этих вкладках используются в предпросмотре.

Настроить свой →

Опции Grid

Опция	Тип	По умолчанию	Описание
`rows`	`number`	`1`	Количество рядов на странице (для фиксированной сетки)
`cols`	`number`	`1`	Количество колонок на странице (для фиксированной сетки)
`gap`	`number \| { row, col }`	`0`	Отступы между ячейками внутри страницы. Между страницами слайдера используется верхнеуровневый `gap`; если он равен `0`, между страницами берётся тот же отступ, что и между колонками (в горизонтальном режиме) или между рядами (в вертикальном). Ненулевой верхнеуровневый `gap` задаёт расстояние между страницами независимо от `grid.gap`.
`dimensions`	`Array<[rows, cols]>`	`undefined`	Массив размеров страниц `[rows, cols]`. Каждый элемент определяет размер одной страницы. Слайды распределяются последовательно.

Примечания

Нужен другой зазор между страницами и внутри сетки — задайте верхнеуровневый gap (межстраничный) и при необходимости grid.gap с объектом { row, col } (внутри страницы).
При использовании dimensions параметры rows и cols игнорируются
В фиксированной сетке (только rows и cols) все страницы имеют одинаковый размер
В режиме dimensions каждая страница может иметь свой размер
Массив dimensions применяется циклически к страницам