Управление
Управление прокруткой
Модуль для управления слайдером через скролл колесика мыши и touch-жесты на мобильных устройствах.
Базовый пример
Включите опцию wheel: true для активации модуля:
Горизонтальный слайдер
Живой пример
Управление прокруткой
6 слайдов
HTML, CSS и JS в этих вкладках используются в предпросмотре.
Код:
Вертикальный слайдер
Живой пример
Колёсико и вертикальный слайдер
6 слайдов
HTML, CSS и JS в этих вкладках используются в предпросмотре.
Код:
Расширенные настройки
Модуль поддерживает дополнительные параметры:
Пример с releaseOnEdges: false
Когда releaseOnEdges: false, скролл блокируется на краях слайдера:
Поддержка мобильных устройств
Модуль автоматически поддерживает touch-жесты на мобильных устройствах:
- Горизонтальный слайдер: свайп влево/вправо
- Вертикальный слайдер: свайп вверх/вниз
Минимальное расстояние для срабатывания свайпа: 50px
Особенности
- Throttle: Модуль автоматически ограничивает частоту срабатывания wheel событий (50ms между событиями)
- Направление: Модуль определяет основное направление скролла и игнорирует перпендикулярные движения
- Boundaries: На краях слайдера можно разрешить или запретить нативный скролл страницы
- Touch support: Полная поддержка touch событий для мобильных устройств
API
Опции
| Опция | Тип | По умолчанию | Описание |
|---|---|---|---|
wheel |
boolean | object |
false |
Включить модуль скролла |
wheel.sensitivity |
number |
1 |
Чувствительность скролла |
wheel.releaseOnEdges |
boolean |
true |
Разрешить нативный скролл на краях |
Примеры использования
Простая активация
С настройками
Вертикальный слайдер
Динамическое изменение настроек
Совместимость с другими модулями
Модуль ScrollControl отлично работает с другими модулями:
Комбинация с Drag
Пользователь может управлять слайдером:
- Скроллом колесика мыши
- Touch-жестами на мобильных
- Перетаскиванием (drag)
- Кнопками навигации
- Кликами по пагинации