Примеры использования
Изучите возможности Tvist через живые примеры. Все примеры показаны на одной странице для удобства.
1. Базовый слайдер
Basic Slider
Смотреть код →Простой слайдер с навигацией и информацией о текущем слайде
2. PerPage: несколько слайдов на экран
PerPage: несколько слайдов на экран
Смотреть код →Демонстрация опции perPage для показа нескольких слайдов одновременно
perPage: 1 (по умолчанию)
perPage: 2
perPage: 3 с зазором
perPage: 4 (grid-style)
perPage: 2, loop: true, 1 слайд
3. Peek: часть соседних слайдов
4. Center: центрирование активного слайда
5. Center с perPage: 2 (половинки по бокам)
perPage: 2, center: true - активный слайд по центру, половинки предыдущего и следующего слайдов по бокам
6. Адаптивный слайдер (Responsive)
Адаптивный слайдер (Responsive)
Смотреть код →Container-first: размеры и perPage считаются от контейнера слайдера. Breakpoints и slideMinSize подстраивают количество слайдов под ширину контейнера (или окна — по умолчанию).
Как работают breakpoints
Логика — desktop first, по аналогии с max-width в CSS. Базовые опции (perPage, gap и т.д.) задают поведение на самом широком экране. В объекте breakpoints ключ — это ширина в пикселях, значение — опции, которые применяются, когда ширина окна (или контейнера) не больше этой величины. Например: 1200: { perPage: 3 } значит «при ширине ≤ 1200px показывать по 3 слайда»; 768: { perPage: 1 } — «при ширине ≤ 768px по одному». То есть как в медиа-запросе @media (max-width: 1200px).
С использованием breakpoints (по умолчанию — по окну)
Как считается респонсив:
• Какой breakpoint применить (и какой perPage) — по умолчанию по ширине окна (window). То есть «правила» (4→3→2→1 слайда) зависят от viewport.
• Размеры слайдов — всегда от ширины контейнера слайдера: ширина слайда = (ширина контейнера − отступы) / perPage. Контент не «от окна», а от блока, в котором живёт слайдер.
Итого: окно решает «сколько колонок», контейнер — «какой размер в пикселях». Пресеты ниже меняют границы breakpoints на лету.
С использованием slideMinSize (container-first)
perPage считается от ширины контейнера: минимальная ширина слайда = 250px. При изменении размера контейнера (окно, сайдбар, grid) слайдер обновляется автоматически.
Pagination limit по разрешениям
На разных разрешениях меняется limit у пагинации: десктоп — 7 точек, планшет (≤992) — 5, мобила (≤768) — 3. Количество слайдов одно и то же; меняется только сколько точек показывается.
Lock на десктопе, листание на мобиле
Десктоп: perPage 2, 2 слайда — одна страница, стрелки и пагинация скрыты (lock). Мобила (≤768): perPage 1, 2 слайда — две страницы, появляются стрелки и пагинация.
Container-based breakpoints
Breakpoints основаны на ширине контейнера, а не окна браузера. Этот слайдер находится в узком контейнере.
7. Карточки товаров: сетка → слайдер
Карточки товаров: сетка → слайдер
Смотреть код →На десктопе карточки отображаются статичной сеткой (без слайдера), на мобильных устройствах автоматически превращаются в слайдер с перелистыванием.
Измените ширину окна браузера, чтобы увидеть трансформацию:
• Десктоп (≥768px): статичная сетка 3×2 без слайдера (enabled: false)
• Мобильный (<768px): интерактивный слайдер с drag и pagination (enabled: true)
• Используется встроенная опция enabled в breakpoints
8. Update Options: динамическое изменение
TIP
Интерактивная демонстрация динамического изменения опций слайдера. Открыть полную версию →
9. Loop Mode
Бесконечная прокрутка
Смотреть код →Слайдер с бесконечным циклом и 2 слайдами на странице
10. Marquee (Бегущая строка)
Бегущая строка (Marquee)
Смотреть код →Непрерывная прокрутка с настраиваемой скоростью и направлением
11. Fade Effect
Эффект затухания
Смотреть код →Плавный переход через прозрачность
12. Cube Effect
3D Куб
Смотреть код →3D трансформация в виде куба
13. Вертикальный
Вертикальный слайдер
Смотреть код →Скролл сверху вниз
14. Вертикальные миниатюры (Gallery)
Вертикальные миниатюры (Gallery)
Смотреть код →Вертикальная лента миниатюр слева синхронизирована с основным горизонтальным слайдером. У миниатюр включен slideMinSize для адаптивности
15. Drag + Navigation
Драг и стрелки
Смотреть код →Перетаскивание мышью/тачем + стрелки навигации
16. Autoplay + Pagination
Автопрокрутка
Смотреть код →Автоматическая смена слайдов + пагинация
16.1 Сценарий «Истории»
Готовый паттерн для полноэкранных карточек: сегментный прогресс, hold-to-pause, видео + waitForVideo.
Stories
Вложенные слайдеры групп и историй с сегментным прогрессом
Desktop: группы переключаются без анимации. Mobile: группы через cube-эффект.
<div class="tvist-v1 stories-groups">
<div class="tvist-v1__container">
<div class="tvist-v1__slide stories-group-slide">
<div class="stories-inner-wrap">
<div class="stories-progress">
<div class="stories-progress__segment"><div class="stories-progress__fill" data-progress-segment="0"></div></div>
<div class="stories-progress__segment"><div class="stories-progress__fill" data-progress-segment="1"></div></div>
<div class="stories-progress__segment"><div class="stories-progress__fill" data-progress-segment="2"></div></div>
</div>
<div class="tvist-v1 stories-inner">
<div class="tvist-v1__container">
<div class="tvist-v1__slide stories-inner-slide">Story 1</div>
<div class="tvist-v1__slide stories-inner-slide">Story 2</div>
<div class="tvist-v1__slide stories-inner-slide">Story 3</div>
</div>
</div>
</div>
</div>
<div class="tvist-v1__slide stories-group-slide">
<div class="stories-inner-wrap">
<div class="stories-progress">
<div class="stories-progress__segment"><div class="stories-progress__fill" data-progress-segment="0"></div></div>
<div class="stories-progress__segment"><div class="stories-progress__fill" data-progress-segment="1"></div></div>
</div>
<div class="tvist-v1 stories-inner">
<div class="tvist-v1__container">
<div class="tvist-v1__slide stories-inner-slide">Story A</div>
<div class="tvist-v1__slide stories-inner-slide">Story B</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="module">
import { Tvist } from 'tvist'
const MOBILE_BREAKPOINT = 767
const groupRoot = document.querySelector('.stories-groups')
const innerRoots = groupRoot.querySelectorAll('.stories-inner')
const progressRoots = groupRoot.querySelectorAll('.stories-progress')
// Внешний слайдер групп:
// desktop = slide (speed 0), mobile = cube (speed 540)
const groupSlider = new Tvist(groupRoot, {
perPage: 1,
gap: 0,
loop: false,
drag: true,
effect: 'slide',
speed: 0,
breakpointsBase: 'window',
breakpoints: {
[MOBILE_BREAKPOINT]: {
effect: 'cube',
speed: 540,
cubeEffect: {
slideShadows: false,
shadow: false,
shadowOffset: 0,
shadowScale: 1
}
}
}
})
// Вложенные слайдеры историй внутри каждой группы
const innerSliders = Array.from(innerRoots).map((root) =>
new Tvist(root, {
perPage: 1,
gap: 0,
loop: false,
drag: true,
holdToPause: true,
autoplay: {
delay: 2800,
pauseOnHover: false,
waitForVideo: false
},
on: {
autoplayProgress: ({ progress, index }) => {
const fillEls = root.parentElement.querySelectorAll('[data-progress-segment]')
fillEls.forEach((el, segmentIndex) => {
if (segmentIndex < index) el.style.width = '100%'
else if (segmentIndex > index) el.style.width = '0%'
else el.style.width = `${Math.max(0, Math.min(progress * 100, 100))}%`
})
},
slideChangeStart: (index) => {
const fillEls = root.parentElement.querySelectorAll('[data-progress-segment]')
fillEls.forEach((el, segmentIndex) => {
el.style.width = segmentIndex < index ? '100%' : '0%'
})
}
}
})
)
// Важно для cube: прогресс находится внутри каждой грани.
// Поэтому при вращении куба индикатор "приклеен" к текущему слайду.
</script>17. Thumbs Sync
Синхронизация с галереей
Смотреть код →Главный слайдер + миниатюры
18. Grid Layout
Grid Layout
Смотреть код →Сетка слайдов с настройкой строк и колонок
19. Grid Dimensions
Grid Dimensions
Смотреть код →Разные размеры страниц в сетке
Страница 1: 2×2 (4 слайда)
Страница 2: 1×2 (2 слайда)
Страница 3: 2×2 (4 слайда)
20. Scroll Control
Scroll Control
Смотреть код →Управление слайдером через скролл колесика мыши
21. Scrollbar
Scrollbar Module
Смотреть код →Кастомный скроллбар для навигации по слайдеру с поддержкой drag & drop
22. Навигация (стрелки и пагинация)
Опции arrows и pagination, в том числе навигация за пределами root — кнопки и пагинация в шапке, футере или сбоку от слайдера. См. Навигация.
23. Auto Width / Auto Height
Auto Width
Смотреть код →Ширина слайдов задаётся содержимым или CSS, слайдер не переопределяет размеры
24. Вложенные слайдеры
Вложенные слайдеры
Смотреть код →Отдельный Tvist на root внутри слайда родителя. Drag во вложенном не прокручивает внешний слайдер.