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

Изучите возможности Tvist через живые примеры. Все примеры показаны на одной странице для удобства.

1. Базовый слайдер

Basic Slider

Смотреть код →

Простой слайдер с навигацией и информацией о текущем слайде

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Current: 1 / 5

2. PerPage: несколько слайдов на экран

PerPage: несколько слайдов на экран

Смотреть код →

Демонстрация опции perPage для показа нескольких слайдов одновременно

perPage: 1 (по умолчанию)

1

2

3

4

5

6

7

8

perPage: 2

1

2

3

4

5

6

7

8

1 / 8

perPage: 3 с зазором

1

2

3

4

5

6

7

8

1 / 8

perPage: 4 (grid-style)

1

2

3

4

5

6

7

8

9

10

11

12

1 / 12

perPage: 2, loop: true, 1 слайд

1

activeIndex: 0 / realIndex: 0

3. Peek: часть соседних слайдов

1

2

3

4

5

4. Center: центрирование активного слайда

1

2

3

4

5

6

7

Active: 1 / 0

5. Center с perPage: 2 (половинки по бокам)

perPage: 2, center: true - активный слайд по центру, половинки предыдущего и следующего слайдов по бокам

Slide1

Slide2

Slide3

Slide4

Slide5

Slide6

Slide7

Slide8

Slide9

1 / 0

■ Active■ Prev/Next■ Visible

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 на лету.

Пресеты breakpoints:

1Slide 1

2Slide 2

3Slide 3

4Slide 4

5Slide 5

6Slide 6

7Slide 7

8Slide 8

9Slide 9

10Slide 10

11Slide 11

12Slide 12

1 / 12

Пресет: 4 на десктопе · Текущий breakpoint: — · perPage: 4

С использованием slideMinSize (container-first)

perPage считается от ширины контейнера: минимальная ширина слайда = 250px. При изменении размера контейнера (окно, сайдбар, grid) слайдер обновляется автоматически.

1Slide 1

2Slide 2

3Slide 3

4Slide 4

5Slide 5

6Slide 6

7Slide 7

8Slide 8

9Slide 9

10Slide 10

11Slide 11

12Slide 12

1 / 12 (по 1)

Автоматически: perPage = 1

Pagination limit по разрешениям

На разных разрешениях меняется limit у пагинации: десктоп — 7 точек, планшет (≤992) — 5, мобила (≤768) — 3. Количество слайдов одно и то же; меняется только сколько точек показывается.

1Slide 1

2Slide 2

3Slide 3

4Slide 4

5Slide 5

6Slide 6

7Slide 7

8Slide 8

9Slide 9

10Slide 10

11Slide 11

12Slide 12

1 / 12 (limit: 7)

Текущий limit пагинации: 7

Lock на десктопе, листание на мобиле

Десктоп: perPage 2, 2 слайда — одна страница, стрелки и пагинация скрыты (lock). Мобила (≤768): perPage 1, 2 слайда — две страницы, появляются стрелки и пагинация.

1Slide 1

2Slide 2

1 / 2 (perPage: 2)

perPage: 2 · Страниц: 2 · Стрелки и пагинация скрыты при одной странице (hideWhenSinglePage).

Container-based breakpoints

Breakpoints основаны на ширине контейнера, а не окна браузера. Этот слайдер находится в узком контейнере.

1

2

3

4

5

6

7

8

1 / 8 (по 1)

Container width breakpoint | perPage: 1

7. Карточки товаров: сетка → слайдер

Карточки товаров: сетка → слайдер

Смотреть код →

На десктопе карточки отображаются статичной сеткой (без слайдера), на мобильных устройствах автоматически превращаются в слайдер с перелистыванием.

Измените ширину окна браузера, чтобы увидеть трансформацию:
• Десктоп (≥768px): статичная сетка 3×2 без слайдера (enabled: false)
• Мобильный (<768px): интерактивный слайдер с drag и pagination (enabled: true)
• Используется встроенная опция enabled в breakpoints

ХИТ

Смартфон Galaxy X

Флагманский смартфон с AMOLED дисплеем

49 990 ₽

NEW

Наушники Pro Max

Беспроводные с шумоподавлением

24 990 ₽

Умные часы Sport

Фитнес-трекер с GPS и пульсометром

12 990 ₽

-20%

Планшет Tab Pro

Производительный планшет для работы

39 990 ₽

Клавиатура Mechanical

Механическая с RGB подсветкой

8 990 ₽

ТОП

Мышь Gaming Pro

Игровая мышь с 16000 DPI

5 990 ₽

🖥️ Режим сетки

8. Update Options: динамическое изменение

TIP

Интерактивная демонстрация динамического изменения опций слайдера. Открыть полную версию →

9. Loop Mode

Бесконечная прокрутка

Смотреть код →

Слайдер с бесконечным циклом и 2 слайдами на странице

1

2

3

4

Real Index: 1 / Active: 0

10. Marquee (Бегущая строка)

Бегущая строка (Marquee)

Смотреть код →

Непрерывная прокрутка с настраиваемой скоростью и направлением

🎨

Элемент 1

🎭

Элемент 2

🎪

Элемент 3

🎬

Элемент 4

🎮

Элемент 5

🎯

Элемент 6

Скорость: 60 px/s

11. Fade Effect

Эффект затухания

Смотреть код →

Плавный переход через прозрачность

Slide 1

Slide 2

Slide 3

Slide 4

12. Cube Effect

3D Куб

Смотреть код →

3D трансформация в виде куба

Slide 1

Slide 2

Slide 3

Slide 4

13. Вертикальный

Вертикальный слайдер

Смотреть код →

Скролл сверху вниз

1

2

3

4

14. Вертикальные миниатюры (Gallery)

Вертикальные миниатюры (Gallery)

Смотреть код →

Вертикальная лента миниатюр слева синхронизирована с основным горизонтальным слайдером. У миниатюр включен slideMinSize для адаптивности

1

2

3

4

5

6

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

15. Drag + Navigation

Драг и стрелки

Смотреть код →

Перетаскивание мышью/тачем + стрелки навигации

1

2

3

4

5

16. Autoplay + Pagination

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

Смотреть код →

Автоматическая смена слайдов + пагинация

A

B

C

D

17. Thumbs Sync

Синхронизация с галереей

Смотреть код →

Главный слайдер + миниатюры

1

2

3

4

5

6

1

2

3

4

5

6

18. Grid Layout

Grid Layout

Смотреть код →

Сетка слайдов с настройкой строк и колонок

1

2

3

4

5

6

7

8

19. Grid Dimensions

Grid Dimensions

Смотреть код →

Разные размеры страниц в сетке

1

2

3

4

5

6

7

8

9

10

Страница 1: 2×2 (4 слайда)

Страница 2: 1×2 (2 слайда)

Страница 3: 2×2 (4 слайда)

20. Scroll Control

Scroll Control

Смотреть код →

Управление слайдером через скролл колесика мыши

Слайд 1

🖱️ Используйте колесико мыши

Слайд 2

Слайд 3

Слайд 4

Слайд 5

Текущий слайд: 1 / 5

Направление: ←→ Горизонтальное

21. Scrollbar

Scrollbar Module

Смотреть код →

Кастомный скроллбар для навигации по слайдеру с поддержкой drag & drop

Слайд 1

🖱️ Используйте скроллбар внизу
Кликайте или перетаскивайте

Слайд 2

Слайд 3

Слайд 4

Слайд 5

Текущий слайд: 1 / 5

Автоскрытие: OFF

22. Навигация (стрелки и пагинация)

Опции arrows и pagination, в том числе навигация за пределами root — кнопки и пагинация в шапке, футере или сбоку от слайдера. См. Навигация.

23. Auto Width / Auto Height

Auto Width

Смотреть код →

Ширина слайдов задаётся содержимым или CSS, слайдер не переопределяет размеры

Узкий180px

Средний280px

Широкий380px

Средний260px

Узкий200px

Широкий340px

Слайд: 1 / 6