Фиксированный размер слайда

Опции fixedWidth и fixedHeight задают размер слайда числом (пиксели) или CSS-строкой ('12rem', '30%' и т.д.).

Фиксированный размер слайда

Смотреть код →

Опции fixedWidth и fixedHeight: фиксированные размеры в px или CSS; при пересчёте layout число слайдов на экране (perPage) подбирается автоматически

Горизонтально: fixedWidth

Ширина каждого слайда 180px, зазор 12px. Поле «на экране» показывает актуальное perPage после расчёта (меняется при изменении ширины окна).

1

2

3

4

5

6

7

8

9

10

Слайд 1 / 10 · на экране: 1

Вертикально: fixedHeight

Высота области 360px, высота слайда 100px — слайдер сам выставляет perPage по вертикали.

1

2

3

4

5

6

7

8

Слайд 1 / 8 · на экране: 1

Горизонтально: только fixedHeight

Ширина по perPage: 2, высота слайдов фиксирована строкой '8rem'.

1

2

3

4

5

6

Поведение

Горизонтальный слайдер

• fixedWidth — фиксированная ширина слайда. Сколько слайдов помещается в видимую область (с учётом gap и peek), определяется автоматически: в объекте опций при каждом пересчёте обновляется perPage. Указанное вами значение perPage до расчёта не используется как «число колонок».
• fixedHeight (без fixedWidth) — только высота слайдов; ширина по-прежнему считается из perPage и ширины контейнера.

Вертикальный слайдер (direction: 'vertical')

• fixedHeight — фиксированная высота слайда и автоматический пересчёт perPage по высоте контейнера.
• fixedWidth (без fixedHeight) — только ширина слайдов; высота считается из perPage.

Код (фрагменты)

Горизонтально, фиксированная ширина:

new Tvist('.tvist-v1', {
  fixedWidth: 200,
  gap: 16,
  speed: 300,
  drag: true,
})

Вертикально, фиксированная высота:

new Tvist('.tvist-v1', {
  direction: 'vertical',
  fixedHeight: 120,
  gap: 8,
  speed: 300,
  drag: true,
})

Контейнеру вертикального слайдера задайте высоту (например, в CSS), иначе не из чего будет вычислять, сколько слайдов видно.

Совместимость

• slideMinSize не применяется, если на главной оси активен соответствующий фиксированный размер (fixedWidth для горизонтали, fixedHeight для вертикали).
• Режимы autoWidth / autoHeight на этой оси отключаются, пока задан фиксированный размер по главной оси.
• В breakpoints можно задавать разные fixedWidth / fixedHeight для разных ширин экрана.

Связанные примеры

• PerPage — явное число слайдов на экране без фиксированной ширины/высоты слайда.
• Auto Width / Height — размер слайда из контента и CSS, без фиксации движком.