Управление
Перетаскиваемый скроллбар
Модуль кастомного скроллбара для навигации по слайдеру. Поддерживает горизонтальное и вертикальное направление, drag & drop, автоматическое скрытие.
Базовый пример
Горизонтальный слайдер
Живой пример
Перетаскиваемый скроллбар
6 слайдов
HTML, CSS и JS в этих вкладках используются в предпросмотре.
Код:
Вертикальный слайдер
Живой пример
Вертикальный скроллбар
6 слайдов
HTML, CSS и JS в этих вкладках используются в предпросмотре.
Код:
Автоматическое скрытие
Скроллбар автоматически скрывается при бездействии.
Живой пример
Скрывающийся скроллбар
6 слайдов
HTML, CSS и JS в этих вкладках используются в предпросмотре.
Код:
Расширенные настройки
Модуль поддерживает множество параметров настройки:
Возможности
1. Клик по треку
Кликните в любом месте скроллбара для быстрого перехода к соответствующему слайду.
2. Drag & Drop
Перетаскивайте ползунок мышью или пальцем для плавной навигации:
- Мышь: зажмите ползунок и перетащите
- Тач: работает на мобильных устройствах
3. Адаптивный размер
Размер ползунка автоматически рассчитывается в зависимости от количества видимых слайдов (perPage).
4. Автоматическое обновление
Позиция скроллбара обновляется при:
- Навигации кнопками
- Drag слайдера
- Программном переходе
slider.scrollTo() - Изменении размера окна
Кастомизация стилей
Вы можете полностью настроить внешний вид скроллбара через CSS:
Кастомный контейнер
Вы можете разместить скроллбар в любом месте страницы:
API
Опции
| Опция | Тип | По умолчанию | Описание |
|---|---|---|---|
scrollbar |
boolean | object |
false |
Включить модуль скроллбара |
scrollbar.container |
string | HTMLElement |
undefined |
Кастомный контейнер |
scrollbar.hide |
boolean |
false |
Автоскрытие при бездействии |
scrollbar.hideDelay |
number |
1000 |
Задержка перед скрытием (мс) |
scrollbar.scrollbarClass |
string |
'tvist-v1__scrollbar' |
CSS класс скроллбара |
scrollbar.trackClass |
string |
'tvist-v1__scrollbar-track' |
CSS класс трека |
scrollbar.thumbClass |
string |
'tvist-v1__scrollbar-thumb' |
CSS класс ползунка |
scrollbar.draggable |
boolean |
true |
Возможность перетаскивания |
Примеры использования
Простая активация
С автоскрытием
Вертикальный с кастомными стилями
С отключённым drag
Совместимость с другими модулями
Модуль Scrollbar отлично работает со всеми другими модулями: