tvist.v1.21.6
Адаптивность

Адаптивное количество

Адаптивный слайдер с автоматической подстройкой под разные размеры экрана.

Живой пример

Адаптивное количество

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

Container-first

Tvist — container-first слайдер: размеры слайдов и расчёт perPage всегда основаны на ширине контейнера (корневого элемента слайдера), а не окна браузера.

  • ResizeObserver следит за контейнером: при изменении его размера (окно, сайдбар, grid, модалка) слайдер пересчитывает размеры и обновляется.
  • slideMinSize — perPage считается от ширины контейнера.
  • Breakpoints по умолчанию привязаны к окну (viewport) для удобства; при необходимости можно переключить на ширину контейнера через breakpointsBase: 'container'.

Это позволяет корректно работать слайдеру внутри узких колонок, модальных окон и любых контекстов, где ширина контейнера не совпадает с шириной окна.

Описание

Адаптивность — ключевая функция современных слайдеров. Tvist предлагает несколько способов сделать слайдер отзывчивым:

  1. Breakpoints — явно задайте настройки для разных ширин (по умолчанию — окна; опционально — контейнера)
  2. slideMinSize — автоматический расчёт perPage от ширины контейнера
  3. breakpointsBase — breakpoints относительно окна или контейнера

Способ 1: Breakpoints

Window-based breakpoints (по умолчанию)

Как это работает:

  • Базовые настройки (perPage: 4) применяются по умолчанию (на больших экранах)
  • При ширине окна ≤ 1200px применяются настройки из breakpoints[1200]
  • Breakpoints работают по принципу max-width (как в CSS media queries)
  • Используется native matchMedia API для оптимальной производительности

Container-based breakpoints

Когда использовать:

  • Слайдер в боковой колонке
  • Модальные окна переменной ширины
  • Компоненты в grid-layout
  • Любые случаи, где ширина контейнера не равна ширине окна

Способ 2: slideMinSize (автоматический расчет)

Как это работает:

  • Tvist автоматически рассчитывает, сколько слайдов поместится в контейнер (container-first)
  • Формула: perPage = floor((containerWidth + gap) / (slideMinSize + gap))
  • При изменении размера контейнера (ResizeObserver) perPage пересчитывается автоматически
  • Минимум: perPage = 1

Преимущества:

  • Не нужно вручную прописывать все breakpoints
  • Плавная адаптация под любые размеры экрана
  • Идеально для fluid/responsive дизайна

Комбинирование подходов

Можно комбинировать slideMinSize с breakpoints для тонкой настройки:

HTML разметка

Практические рекомендации

Desktop First стратегия

Mobile First стратегия

Примечание: Tvist использует max-width логику, поэтому Desktop First подход более естественен.

Адаптивные gaps

События и callbacks

Производительность

Оптимизации в Tvist:

  • matchMedia API используется для window-based breakpoints (нет постоянных проверок)
  • Container-based режим использует throttled resize observer
  • Пересчеты происходят только при реальном изменении breakpoint
  • События breakpoint и resize дебаунсятся

Сравнение подходов

Подход Плюсы Минусы Когда использовать
Breakpoints Полный контроль, предсказуемость Нужно задавать вручную Дизайн с четкими breakpoints
slideMinSize Автоматика, гибкость Менее предсказуемо Fluid дизайн, много размеров
Container-based Работает в любом контексте Больше ресурсов Боковые панели, модальные окна

Модули и брейкпоинты

Модули (pagination, arrows и др.) полностью реагируют на смену брейкпоинта: при переходе в брейкпоинт модуль инициализируется, при выходе — уничтожается.

Это позволяет, например, показывать пагинацию только на мобильных устройствах:

Аналогично работает для стрелок (arrows), автоплея (autoplay) и любых других модулей.

Адаптивная пагинация (limit по breakpoints)

В breakpoints можно менять не только perPage и gap, но и опции модулей, например pagination.limit — максимальное количество видимых точек. На десктопе можно показывать 7 точек, на планшете 5, на мобиле 3:

При смене breakpoint вызывается update(), пагинация перерисовывается с новым limit.

Lock на десктопе, листание на мобиле

Если на десктопе слайдов ровно на одну страницу (например perPage: 2 и 2 слайда), слайдер «заблокирован» — одна страница, листать нечего. При включённом hideWhenSinglePage (по умолчанию) стрелки и пагинация автоматически скрываются. На мобиле при perPage: 1 те же 2 слайда дают две страницы — стрелки и пагинация появляются, слайдер листается.

Итого: на широком экране блок статичен (без стрелок и точек), на узком — полноценный слайдер.

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

  • PerPage Example — базовое использование perPage
  • Basic Example — основы слайдера
  • Modules — комбинирование с другими модулями