Блокировка короткой ленты

Когда весь контент помещается в видимую область и листать некуда, слайдер автоматически переходит в состояние lock: отключаются стрелки, не срабатывает перетаскивание, на корневой элемент вешается класс tvist-v1--locked. В режиме loop: true блокировка не применяется.

Живой пример

Блокировка короткой ленты

6 слайдов

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

Настроить свой →

Когда срабатывает lock

Слайдов не больше, чем perPage (например, perPage: 2 и 2 слайда).
Или контент по размеру не больше контейнера, и границы скролла не позволяют никуда сдвинуться.

В этих случаях вызывается checkLock(), слайдер помечается как заблокированный, эмитятся события lock / unlock.

Поведение

Состояние	Класс на root	События	Навигация / drag
Заблокирован	`tvist-v1--locked`	`lock`	Стрелки disabled, drag не стартует
Разблокирован	—	`unlock`	Работают как обычно

Полный список классов состояний на root (--created, --destroyed, --locked) см. в Свойства → root.

Проверка состояния

Свойство: slider.root.classList.contains(TvistV1.CLASSES.locked) — true / false.
События: в опциях on.lock и on.unlock.

Пример кода

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

PerPage — количество видимых слайдов
Loop — при loop: true lock не используется