tvist.v1.21.6
Основы

Активный в центре

Режим центрирования позволяет располагать активный слайд по центру контейнера. Это полезно когда нужно выделить текущий слайд, показывая части соседних слайдов по бокам.

Основные возможности

  • Центрирование активного слайда - активный слайд всегда находится по центру
  • Классы состояний - автоматическое применение классов для активного, предыдущего, следующего и видимых слайдов
  • Гибкая настройка - работает с любым значением perPage
  • Плавная анимация - smooth переходы между слайдами

Базовый пример

Живой пример

Активный в центре

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

PerPage: 2 (Половинки по бокам)

Когда perPage: 2 и center: true, активный слайд находится по центру, а половинки предыдущего и следующего слайдов видны по бокам.

Живой пример

Center с двумя слайдами

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

PerPage: 4 (Множественные видимые слайды)

При perPage: 4 видны активный, предыдущий, следующий и кусочки других слайдов.

Живой пример

Center с четырьмя слайдами

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

Классы состояний слайдов

Модуль SlideStatesModule автоматически применяет следующие классы:

CSS классы

  • .tvist-v1__slide--active - активный слайд (по центру)
  • .tvist-v1__slide--prev - предыдущий слайд
  • .tvist-v1__slide--next - следующий слайд
  • .tvist-v1__slide--visible - видимые слайды (полностью или частично)

Пример стилизации

Center + Loop (Бесконечное центрирование)

Комбинация center: true и loop: true позволяет создать бесконечную карусель с активным элементом по центру.

Живой пример

Center и loop

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

Focus (focus: 'center')

center: { focus: true } стремится поставить активный слайд по центру viewport, но не создаёт пустоты у краёв: на первых и последних слайдах позиция обрезается до min/max scroll (аналог Splide trimSpace: true).

Отличие от center: true / active: true:

Режим Первый / последний слайд Середина
center: true всегда по центру по центру
center: { focus: true } прижат к краю, без пустот по центру, если хватает места
Живой пример

Center focus

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

Justify в lock-режиме

center: { justify: true } не центрирует активный слайд. Вместо этого слайды выравниваются по центру только когда слайдер находится в locked состоянии. Как только lock спадает, слайдер возвращается к обычному поведению.

Живой пример

Center justify при lock

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

Если нужно объединить оба режима (обычное center + justify при lock), используйте:

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

Логика центрирования

  1. Расчет offset - вычисляется смещение для центрирования:

  2. Позиционирование - к базовой позиции добавляется offset:

  3. Обновление классов - при каждом изменении слайда обновляются классы состояний

Управление состояниями

SlideStatesModule отслеживает:

  • Активный индекс - определяет текущий слайд
  • Видимость - проверяет пересечение слайдов с контейнером через getBoundingClientRect()
  • Соседние слайды - вычисляет prev/next с учетом loop режима

Совместимость с другими опциями

С Loop

С Drag

С Breakpoints

Особенности работы с Peek

Важно: В режиме center: true (и active: true) правила peekTrim для выравнивания слайдов по краям не применяются — активный слайд всегда по центру. В режиме center: { focus: true } trim у краёв включён (как у Splide с trimSpace).

Однако, peek (отступы контейнера) все еще учитываются при расчете доступного пространства для слайдов. Это значит, что peek уменьшает эффективную ширину области просмотра, в которой происходит центрирование.

Если вам нужно просто добавить видимость соседних слайдов, в режиме center это происходит естественно за счет центрирования и perPage, поэтому часто явное использование peek не требуется.

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

  1. Фокус на активном слайде - пользователь видит, какой слайд текущий
  2. Контекст - видны соседние слайды для лучшей навигации
  3. Гибкость - работает с любым perPage
  4. Performance - эффективная работа через классы CSS

Отличия от обычного режима

Параметр Обычный режим Center режим
Позиция активного Слева/сверху По центру
EndIndex slideCount - perPage slideCount - 1
Навигация По страницам По слайдам
Классы состояний Нет Да (active, prev, next, visible)

API

Опции

События

Классы обновляются автоматически на следующих событиях:

  • slideChangeStart - начало смены слайда
  • slideChangeEnd - завершение смены слайда
  • scroll - во время прокрутки (обновление видимости)

Методы

Все стандартные методы работают в center режиме:

Best Practices

  1. Используйте четное perPage - 2, 4, 6 для симметричного вида
  2. Стилизуйте активный слайд - сделайте его заметным через CSS
  3. Добавьте gap - расстояние между слайдами улучшает читаемость
  4. Тестируйте на разных размерах - используйте breakpoints для адаптивности

Troubleshooting

Активный слайд не по центру

Проверьте, что:

  • center: true или center: { active: true } указан в опциях
  • Контейнер имеет достаточную ширину для perPage слайдов
  • CSS не переопределяет позиционирование

Классы не применяются

Убедитесь, что:

  • Модуль SlideStatesModule зарегистрирован (автоматически при импорте Tvist)
  • Нет CSS конфликтов с классами .tvist-v1__slide--*