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

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

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

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

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

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

perPage: 3, center: true

1

2

3

4

5

6

7

Active: 1 / 0

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

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

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

Center с perPage: 2

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

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 видны активный, предыдущий, следующий и кусочки других слайдов.

Center с perPage: 4

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

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

1 ACTIVE

2

3

4

5

6

7

8

9

10

11

12

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 - видимые слайды (полностью или частично)

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

/* Активный слайд - увеличен и выделен */
.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 позволяет создать бесконечную карусель с активным элементом по центру.

Center с Loop

Бесконечная прокрутка с центрированием

1

2

3

4

5

6

7

Active: 1 / 0 (Loop)

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

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

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

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

   offset = (containerSize - slideSize) / 2

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

   position = -slidePosition + centerOffset

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

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

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 правила peek (смещения) для выравнивания слайдов по краям (trim) не применяются, так как активный слайд всегда выравнивается по центру контейнера.

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

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

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

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

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

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

API

Опции

interface TvistOptions {
  /**
   * Центрирование активного слайда
   * @default false
   */
  center?: boolean
}

События

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

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

Методы

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

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

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

Best Practices

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

Troubleshooting

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

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

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

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

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

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