API Документация
Полный справочник по API библиотеки Tvist.
Быстрая навигация
📋 Опции
Полный список всех доступных опций для настройки слайдера: базовые параметры, навигация, автоматизация, эффекты, адаптивность и обработчики событий.
⚡ Методы
Все методы для управления слайдером: навигация между слайдами, обновление состояния, динамическое изменение опций, работа с модулями и событиями.
🎯 Свойства
Доступные свойства экземпляра слайдера: элементы DOM, текущее состояние, информация о слайдах и конфигурация.
📡 События
События жизненного цикла, навигации, взаимодействия и обновления. Примеры подписки и использования.
🔧 Статические методы
Статические методы и свойства класса Tvist: версия библиотеки, регистрация модулей, управление реестром.
🧩 Модули
Встроенные модули и создание собственных: навигация, автопрокрутка, эффекты, адаптивность, grid, thumbs и другие.
📘 TypeScript
Полная типизация, generic типы, расширение интерфейсов, интеграция с фреймворками.
Обзор API
Создание слайдера
import Tvist from 'tvist'
import 'tvist/dist/tvist.css'
const slider = new Tvist('.slider', {
perPage: 3,
gap: 20,
speed: 300,
autoplay: 3000,
pagination: true,
arrows: true
})Основные методы
// Навигация
slider.next()
slider.prev()
slider.scrollTo(2)
// Управление состоянием
slider.update()
slider.updateOptions({ perPage: 4 })
slider.destroy()
// Работа с событиями
slider.on('slideChangeStart', (index) => {
console.log('Активный слайд:', index)
})
// Получение модуля
const autoplay = slider.getModule('autoplay')
autoplay?.pause()Доступ к свойствам
// Текущее состояние
console.log(slider.activeIndex)
console.log(slider.slides.length)
// Проверка возможности навигации
if (slider.canScrollNext) {
slider.next()
}
// Доступ к элементам
slider.root.classList.add('custom-class')
slider.container.style.padding = '20px'Регистрация модулей
import {
AutoplayModule,
PaginationModule,
LoopModule
} from 'tvist/modules'
// Глобальная регистрация
Tvist.registerModule('autoplay', AutoplayModule)
Tvist.registerModule('pagination', PaginationModule)
Tvist.registerModule('loop', LoopModule)
// Использование
const slider = new Tvist('.slider', {
autoplay: 3000,
pagination: true,
loop: true
})Опции слайдера
Tvist предоставляет обширный набор опций для настройки слайдера под ваши нужды. Подробнее см. страницу Опции.
Примеры использования
Базовая настройка
const slider = new Tvist('.slider', {
// Отображение
perPage: 3,
gap: 20,
speed: 300,
// Навигация
arrows: true,
pagination: { type: 'bullets' },
// Автоматизация
autoplay: 3000,
loop: true
})Адаптивный слайдер
const slider = new Tvist('.slider', {
perPage: 1,
gap: 10,
breakpoints: {
640: { perPage: 2, gap: 15 },
1024: { perPage: 3, gap: 20 },
1440: { perPage: 4, gap: 30 }
}
})С событиями
const slider = new Tvist('.slider', {
on: {
created: (tvist) => {
console.log('Слайдер создан')
},
slideChangeStart: (index) => {
console.log('Переход к слайду:', index)
},
resize: () => {
console.log('Размер изменился')
}
}
})Динамическое изменение
// Изменение опций на лету
slider.updateOptions({ perPage: 4, gap: 30 })
// Адаптация под размер экрана
window.addEventListener('resize', () => {
const width = window.innerWidth
if (width < 768) {
slider.updateOptions({ perPage: 1 })
} else if (width < 1024) {
slider.updateOptions({ perPage: 2 })
} else {
slider.updateOptions({ perPage: 3 })
}
})Управление автопрокруткой
const slider = new Tvist('.slider', {
autoplay: { delay: 3000, pauseOnHover: true }
})
const autoplay = slider.getModule('autoplay')
// Управление
document.querySelector('.pause-btn').addEventListener('click', () => {
autoplay?.pause()
})
document.querySelector('.play-btn').addEventListener('click', () => {
autoplay?.start()
})Полезные ссылки
- Примеры - Интерактивные примеры использования
- Быстрый старт - Начало работы с библиотекой
- GitHub - Исходный код и Issues