Формат историй

Сценарий «истории» можно собрать полностью на событиях Tvist без внешних таймеров:

• autoplayProgress — заполняет активный сегмент 0..1
• longPressStart / longPressEnd — пауза/возобновление по удержанию
• waitForVideo: true — для HTML <video> переход по окончанию ролика
• autoplayProgress с progress: 1 у последнего слайда — сигнал закрыть модалку или переключить внешний контейнер

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

Интерактивный пример

В примере три автора и восемь историй из прежней документации. Внешний слайдер переключает группы, а вложенные слайдеры показывают истории каждого автора. Автопрокрутка работает только у активной группы: после последней истории открывается следующий автор, после последнего автора показ останавливается.

Тап по левому или правому краю переключает историю. Удержание в любой части карточки приостанавливает прогресс, отпускание продолжает показ. Кнопки под карточкой позволяют переключать истории с клавиатуры, ставить показ на паузу и начинать сначала.

Истории и группы переключаются плавно, в том числе при доводке после отпускания свайпа. При ширине окна до 767 px группы переключаются с эффектом куба; его можно проверить кнопкой «Мобильный вид · 375 px». Сегменты прогресса находятся внутри каждой группы и вращаются вместе с её содержимым. Если включено уменьшение движения в настройках системы, автопрокрутка изначально на паузе, а переходы выполняются без анимации.

Базовая конфигурация

Сегменты прогресса

Зоны тапа «назад / вперёд»

Внешние зоны можно оставить вне root слайдера:

Если в этих элементах не нужно удержание, добавьте data-tvist-no-hold и укажите exclude в holdToPause.

Вложенные слайдеры

Рекомендуемый паттерн:

• внешний слайдер групп: autoplay: false
• внутренний слайдер медиа: autoplay + holdToPause + waitForVideo

Это упрощает синхронизацию и исключает конфликт таймеров между уровнями. Для hold на внутреннем слайдере pointerdown не всплывает к родителю; дополнительно на слайде можно слушать DOM CustomEvent из TVIST_DOM_EVENTS (события API).

В интерактивном примере зоны тапа вычисляются по координате касания на внутреннем слайдере. Это позволяет использовать holdToPause на всей карточке без перекрывающих её оверлеев. Короткий тап переключает историю, удержание и свайп не считаются тапом.