Center Mode (Центрирование)

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

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

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

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

Active: 1 / 0

new Tvist('.tvist', {
  perPage: 3,
  gap: 20,
  center: true, // Активный слайд по центру
  speed: 400,
})

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

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

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

Slide1

Slide2

Slide3

Slide4

Slide5

Slide6

Slide7

Slide8

Slide9

1 / 0

■ Active■ Prev/Next■ Visible

new Tvist('.tvist', {
  perPage: 2,
  gap: 16,
  center: true,
  speed: 350,
})

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

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

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

1 ACTIVE

new Tvist('.tvist', {
  perPage: 4,
  gap: 12,
  center: true,
  speed: 400,
})

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

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

CSS классы

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

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

css

/* Активный слайд - увеличен и выделен */
.tvist-v1__slide--active .slide-content {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Предыдущий и следующий - слегка уменьшены */
.tvist-v1__slide--prev .slide-content,
.tvist-v1__slide--next .slide-content {
  opacity: 0.7;
  transform: scale(0.95);
}

/* Видимые, но не активные - еще более уменьшены */
.tvist-v1__slide--visible:not(.tvist-v1__slide--active):not(.tvist-v1__slide--prev):not(.tvist-v1__slide--next) .slide-content {
  opacity: 0.4;
  transform: scale(0.9);
}

/* Невидимые слайды */
.tvist-v1__slide:not(.tvist-v1__slide--visible) .slide-content {
  opacity: 0.2;
}

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

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

Active: 1 / 0 (Loop)

new Tvist('.tvist', {
  perPage: 3,
  center: true,
  loop: true,
  speed: 400,
})

Focus (`focus: 'center'`)

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

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

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

Край: первый слайд прижат к началу

На краях нет пустот — центрирование только когда есть место.

Слайд 1 / 6

Середина: активный по центру

Листайте к слайдам 3–4 — активный визуально по центру viewport.

new Tvist('.tvist', {
  perPage: 3,
  gap: 16,
  center: { focus: true },
  loop: false,
  speed: 400,
})

Justify в lock-режиме

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

Locked: слайды выровнены по центру

2 слайда при perPage: 3 → lock активен, контент визуально по центру.

Unlocked: обычное поведение

6 слайдов при perPage: 3 → lock снят, слайды ведут себя стандартно.

new Tvist('.tvist', {
  perPage: 3,
  gap: 16,
  center: { justify: true },
  loop: false,
})

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

new Tvist('.tvist', {
  perPage: 3,
  center: {
    active: true,
    justify: true,
  },
})

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

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

Расчет offset - вычисляется смещение для центрирования:
ts
```
offset = (containerSize - slideSize) / 2
```
Позиционирование - к базовой позиции добавляется offset:
ts
```
position = -slidePosition + centerOffset
```
Обновление классов - при каждом изменении слайда обновляются классы состояний

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

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

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

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

С Loop

new Tvist('.tvist', {
  perPage: 3,
  center: true,
  loop: true, // Бесконечная прокрутка
})

С Drag

new Tvist('.tvist', {
  perPage: 2,
  center: true,
  drag: true, // Перетаскивание включено
})

С Breakpoints

new Tvist('.tvist', {
  perPage: 4,
  center: true,
  breakpoints: {
    768: {
      perPage: 2, // На мобильных меньше слайдов
    },
    480: {
      perPage: 1,
      center: false, // Отключаем центрирование на маленьких экранах
    },
  },
})

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

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

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

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

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

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

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

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

API

Опции

interface TvistOptions {
  /**
   * Центрирование:
   * - true: центрирование активного слайда
   * - объект: отдельные флаги active/focus/justify
   * @default false
   */
  center?: boolean | {
    active?: boolean
    focus?: boolean
    justify?: boolean
  }
}

События

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

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

Методы

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

const tvist = new Tvist('.tvist', { center: true })

tvist.next()        // Следующий слайд
tvist.prev()        // Предыдущий слайд
tvist.scrollTo(5)   // К конкретному слайду

Best Practices

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

Troubleshooting

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

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

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

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

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

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

Center Mode (Центрирование)

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

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

Базовое центрирование

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

Center с perPage: 2

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

Center с perPage: 4

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

CSS классы

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

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

Center с Loop

Focus (`focus: 'center'`)

Center focus

Край: первый слайд прижат к началу

Середина: активный по центру

Justify в lock-режиме

Center justify при locked

Locked: слайды выровнены по центру

Unlocked: обычное поведение

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

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

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

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

С Loop

С Drag

С Breakpoints

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

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

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

API

Опции

События

Методы

Best Practices

Troubleshooting

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

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

Center Mode (Центрирование) ​

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

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

Базовое центрирование

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

Center с perPage: 2

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

Center с perPage: 4

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

CSS классы ​

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

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

Center с Loop

Focus (focus: 'center') ​

Center focus

Край: первый слайд прижат к началу

Середина: активный по центру

Justify в lock-режиме ​

Center justify при locked

Locked: слайды выровнены по центру

Unlocked: обычное поведение

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

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

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

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

С Loop ​

С Drag ​

С Breakpoints ​

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

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

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

API ​

Опции ​

События ​

Методы ​

Best Practices ​

Troubleshooting ​

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

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

Center Mode (Центрирование)

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

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

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

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

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

CSS классы

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

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

Focus (`focus: 'center'`)

Justify в lock-режиме

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

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

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

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

С Loop

С Drag

С Breakpoints

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

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

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

API

Опции

События

Методы

Best Practices

Troubleshooting

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

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