tvist.v1.21.6
Практика

Настройки на лету

Метод updateOptions() позволяет изменять настройки слайдера на лету без необходимости пересоздания экземпляра.

Интерактивная демонстрация

Попробуйте изменять параметры в реальном времени и наблюдайте за изменениями слайдера:

Живой пример

Настройки на лету

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

Описание метода

Возвращает: экземпляр слайдера для цепочки вызовов

Поддерживаемые опции

Метод поддерживает динамическое изменение большинства опций:

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

  • perPage - количество слайдов на странице
  • slideMinSize - минимальный размер слайда
  • gap - расстояние между слайдами
  • peek - отступы слайдера
  • peekTrim - обрезка peek на краях
  • speed - скорость анимации
  • direction - направление прокрутки
  • center - центрирование активного слайда

Управление

  • drag - включение/отключение перетаскивания
  • dragSpeed - скорость перетаскивания
  • rubberband - эффект резинки

Автопрокрутка

  • autoplay - включение/настройка автопрокрутки (число, true, false или объект с delay, pauseOnHover, pauseOnInteraction, disableOnInteraction, waitForVideo)

События

  • on - обработчики событий (заменяют предыдущие)

Адаптивность (breakpoints)

  • breakpoints - объект с настройками по ширине (полная замена при обновлении)
  • breakpointsBase - база для сравнения ширины ('container' или 'window')

updateOptions с breakpoints

При передаче breakpoints в updateOptions() они полностью заменяют существующие breakpoints (мёрдж не выполняется).

Полная замена и удаление

Сохранение базовых опций

Базовые опции (не из breakpoint) при обновлении breakpoints сохраняются:

Обновление breakpoints вместе с другими опциями

Вложенные опции в breakpoints

Вложенные опции (например, pagination) корректно мёрджатся с базовыми:

Важно: полная замена, не мёрдж

Чтобы добавить один breakpoint, нужно передать все нужные breakpoints:

После updateOptions() с breakpoints применяется новый breakpoint, пересчитываются размеры; при смене breakpoint эмитится событие breakpoint.

Примеры с breakpoints

Динамическая смена набора breakpoints:

Адаптация под устройство:

Примеры использования

Простое изменение опций

Адаптация под размер экрана

Переключение направления

Управление автопрокруткой

Динамическое изменение peek

Обновление обработчиков событий

Цепочка вызовов

События

optionsUpdated

При вызове updateOptions() генерируется событие optionsUpdated:

Пресеты конфигураций

Удобно создавать пресеты для разных сценариев:

Сравнение с пересозданием

❌ Старый подход (пересоздание)

✅ Новый подход (updateOptions)

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

  • ⚡ Быстрее (нет пересоздания DOM)
  • 💾 Сохраняет состояние (позиция, активные модули)
  • 🎯 Проще в использовании
  • 🔄 Поддерживает цепочку вызовов

Ограничения

Некоторые опции требуют полного пересоздания слайдера:

  • Изменение loop (требуется реинициализация клонов)
  • Регистрация новых модулей
  • Опции, связанные с изначальной DOM-структурой

Для таких случаев используйте подход с destroy() и созданием нового экземпляра.

React интеграция

Vue интеграция

Полезные ссылки