Grid Layout

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

Grid Layout

Сетка слайдов с настройкой строк и колонок

1

2

3

4

5

6

7

8

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

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

new Tvist('.slider', {
  grid: {
    rows: 2,
    cols: 2,
    gap: {
      row: 10,
      col: 10
    }
  }
})

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

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

Grid Dimensions

Разные размеры страниц в сетке

1

2

3

4

5

6

7

8

9

10

Страница 1: 2×2 (4 слайда)

Страница 2: 1×2 (2 слайда)

Страница 3: 2×2 (4 слайда)

new Tvist('.slider', {
  grid: {
    gap: 10,
    dimensions: [
      [2, 2], // 1-я страница: 2 ряда × 2 колонки = 4 слайда
      [1, 2], // 2-я страница: 1 ряд × 2 колонки = 2 слайда
      [2, 2], // 3-я страница: 2 ряда × 2 колонки = 4 слайда
      // Цикл повторяется для следующих страниц
    ]
  }
})

Опции Grid

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

Примечания

• При использовании dimensions параметры rows и cols игнорируются
• В фиксированной сетке (только rows и cols) все страницы имеют одинаковый размер
• В режиме dimensions каждая страница может иметь свой размер
• Массив dimensions применяется циклически к страницам