updateOptions - Динамическое изменение

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

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

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

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

perPage: 3

gap: 20px

speed: 300ms

center (центрирование активного слайда)

direction:

Peek (отступы)

peek left/top: 0px

peek right/bottom: 0px

peekTrim (прижимать края)

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

Включить автопрокрутку

Пресеты

Текущее состояние:

Активный слайд:1 / 8

Обновлений:0

Слайд 1

Слайд 2

Слайд 3

Слайд 4

Слайд 5

Слайд 6

Слайд 7

Слайд 8

Текущий вызов updateOptions():

slider.updateOptions({
  "perPage": 3,
  "gap": 20,
  "speed": 300,
  "direction": "horizontal",
  "center": false,
  "peekTrim": true
})

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

typescript

updateOptions(newOptions: Partial<TvistOptions>): this

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

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

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

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

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 (мёрдж не выполняется).

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

typescript

const slider = new Tvist('.slider', {
  perPage: 4,
  breakpoints: {
    992: { perPage: 3 },
    768: { perPage: 2 },
    480: { perPage: 1 }
  }
})

// Заменяем breakpoints полностью
slider.updateOptions({
  breakpoints: {
    1024: { perPage: 2 },
    600: { perPage: 1 }
  }
})
// Теперь используются только новые breakpoints (992, 768, 480 удалены)

// Удалить все breakpoints
slider.updateOptions({ breakpoints: {} })

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

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

typescript

const slider = new Tvist('.slider', {
  perPage: 4,
  gap: 16,
  speed: 500,
  loop: true,
  breakpoints: { 768: { perPage: 2 } }
})

slider.updateOptions({
  breakpoints: { 600: { perPage: 1 } }
})
// gap, speed, loop остались без изменений

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

typescript

slider.updateOptions({
  gap: 32,
  breakpoints: {
    600: { perPage: 1, gap: 8 }
  }
})
// При ширине > 600px: gap = 32; при ширине ≤ 600px: gap = 8

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

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

typescript

const slider = new Tvist('.slider', {
  perPage: 4,
  pagination: { limit: 7, type: 'bullets', clickable: true },
  breakpoints: { 768: { perPage: 2, pagination: { limit: 5 } } }
})

slider.updateOptions({
  breakpoints: {
    600: { perPage: 1, pagination: { limit: 3 } }
  }
})
// При ширине ≤ 600px: limit = 3, type и clickable — из базовых опций

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

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

typescript

// ❌ Неправильно: старые 992 и 768 будут удалены
slider.updateOptions({
  breakpoints: { 480: { perPage: 1 } }
})

// ✅ Правильно: передаём все breakpoints
slider.updateOptions({
  breakpoints: {
    992: { perPage: 3 },
    768: { perPage: 2 },
    480: { perPage: 1 }
  }
})

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

Примеры с breakpoints

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

javascript

document.querySelector('.toggle-detailed').addEventListener('click', () => {
  slider.updateOptions({
    breakpoints: {
      1200: { perPage: 3 },
      992: { perPage: 2 },
      768: { perPage: 1 }
    }
  })
})

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

javascript

const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
if (isMobile) {
  slider.updateOptions({
    breakpointsBase: 'window',
    breakpoints: { 768: { perPage: 2 }, 480: { perPage: 1 } }
  })
} else {
  slider.updateOptions({
    breakpointsBase: 'container',
    breakpoints: { 1200: { perPage: 3 }, 992: { perPage: 2 } }
  })
}

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

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

javascript

const slider = new Tvist('.slider', {
  perPage: 1,
  gap: 10
})

// Изменить количество слайдов
slider.updateOptions({ perPage: 3 })

// Изменить несколько опций
slider.updateOptions({
  perPage: 2,
  gap: 30,
  speed: 500
})

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

javascript

function updateSliderForScreen() {
  const width = window.innerWidth
  
  if (width < 768) {
    slider.updateOptions({ 
      perPage: 1, 
      gap: 10,
      peek: { left: 20, right: 20 }
    })
  } else if (width < 1024) {
    slider.updateOptions({ 
      perPage: 2, 
      gap: 20,
      peek: 0
    })
  } else {
    slider.updateOptions({ 
      perPage: 3, 
      gap: 30,
      peek: 0
    })
  }
}

window.addEventListener('resize', updateSliderForScreen)
updateSliderForScreen()

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

javascript

const toggleBtn = document.querySelector('.toggle-direction')

toggleBtn.addEventListener('click', () => {
  const current = slider.options.direction
  slider.updateOptions({
    direction: current === 'horizontal' ? 'vertical' : 'horizontal'
  })
})

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

javascript

// Включить автопрокрутку
document.querySelector('.enable-autoplay').addEventListener('click', () => {
  slider.updateOptions({ autoplay: 3000 }) // или autoplay: { delay: 3000 }
})

// Отключить автопрокрутку
document.querySelector('.disable-autoplay').addEventListener('click', () => {
  slider.updateOptions({ autoplay: false })
})

// Изменить скорость
document.querySelector('.speed-slider').addEventListener('input', (e) => {
  slider.updateOptions({ autoplay: parseInt(e.target.value) }) // shorthand: число задаёт delay
})

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

javascript

const peekSlider = document.querySelector('.peek-control')

peekSlider.addEventListener('input', (e) => {
  const value = parseInt(e.target.value)
  
  slider.updateOptions({
    peek: { left: value, right: value }
  })
})

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

javascript

// Изначальный обработчик
const slider = new Tvist('.slider', {
  on: {
    slideChangeStart: (index) => {
      console.log('Слайд 1:', index)
    }
  }
})

// Заменить обработчик
slider.updateOptions({
  on: {
    slideChangeStart: (index) => {
      console.log('Слайд 2:', index)
      // Новая логика
      updateAnalytics(index)
    }
  }
})

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

javascript

slider
  .updateOptions({ perPage: 3, gap: 20 })
  .scrollTo(0)
  .updateOptions({ speed: 500 })

События

optionsUpdated

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

javascript

slider.on('optionsUpdated', (tvist, newOptions) => {
  console.log('Обновлены опции:', newOptions)
  
  // Выполнить дополнительную логику
  if (newOptions.perPage) {
    console.log('Изменено количество слайдов на:', newOptions.perPage)
    updatePaginationUI()
  }
  
  if (newOptions.direction) {
    console.log('Изменено направление на:', newOptions.direction)
    updateLayoutClasses()
  }
})

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

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

javascript

const presets = {
  mobile: {
    perPage: 1,
    gap: 10,
    peek: { left: 20, right: 20 }
  },
  
  tablet: {
    perPage: 2,
    gap: 20,
    peek: 0
  },
  
  desktop: {
    perPage: 4,
    gap: 30,
    peek: 0
  },
  
  gallery: {
    perPage: 1,
    gap: 0,
    center: true,
    peek: { left: 80, right: 80 },
    autoplay: 3000
  }
}

// Применить пресет
function applyPreset(name) {
  slider.updateOptions(presets[name])
}

// Использование
applyPreset('mobile')
applyPreset('gallery')

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

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

javascript

// Уничтожаем
const currentIndex = slider.activeIndex
slider.destroy()

// Создаём заново
slider = new Tvist('.slider', {
  perPage: 4,
  gap: 30,
  start: currentIndex // Восстанавливаем позицию
})

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

javascript

// Просто обновляем
slider.updateOptions({
  perPage: 4,
  gap: 30
})
// Позиция сохраняется автоматически

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

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

Ограничения

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

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

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

React интеграция

typescript

import { useEffect, useRef } from 'react'
import Tvist from 'tvist'

function Slider({ perPage, gap, speed }) {
  const sliderRef = useRef<Tvist | null>(null)

  // Создание слайдера
  useEffect(() => {
    sliderRef.current = new Tvist('.slider', {
      perPage,
      gap,
      speed
    })
    
    return () => sliderRef.current?.destroy()
  }, [])

  // Обновление опций при изменении props
  useEffect(() => {
    sliderRef.current?.updateOptions({ perPage, gap, speed })
  }, [perPage, gap, speed])

  return <div className="slider">...</div>
}

Vue интеграция

vue

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import Tvist from 'tvist'

const props = defineProps({
  perPage: { type: Number, default: 3 },
  gap: { type: Number, default: 20 },
  speed: { type: Number, default: 300 }
})

const sliderEl = ref(null)
let slider = null

onMounted(() => {
  slider = new Tvist(sliderEl.value, {
    perPage: props.perPage,
    gap: props.gap,
    speed: props.speed
  })
})

onUnmounted(() => {
  slider?.destroy()
})

// Обновление при изменении props
watch(() => [props.perPage, props.gap, props.speed], ([perPage, gap, speed]) => {
  slider?.updateOptions({ perPage, gap, speed })
})
</script>

<template>
  <div ref="sliderEl" class="tvist-v1">
    <slot />
  </div>
</template>

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

Методы API - Все методы слайдера
Опции - Полный список опций
Breakpoints API - Настройка breakpoints
События - Работа с событиями, включая breakpoint

updateOptions - Динамическое изменение ​

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

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

Peek (отступы)

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

Пресеты

Текущее состояние:

Текущий вызов updateOptions():

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

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

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

Управление ​

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

События ​

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

updateOptions с breakpoints ​

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

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

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

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

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

Примеры с breakpoints ​

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

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

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

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

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

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

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

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

События ​

optionsUpdated ​

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

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

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

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

Ограничения ​

React интеграция ​

Vue интеграция ​

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

updateOptions - Динамическое изменение

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

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

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

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

Управление

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

События

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

updateOptions с breakpoints

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

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

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

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

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

Примеры с breakpoints

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

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

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

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

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

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

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

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

События

optionsUpdated

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

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

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

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

Ограничения

React интеграция

Vue интеграция

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