Свободное перетаскивание
Режим свободного перетаскивания позволяет прокручивать слайдер без привязки к позициям слайдов, как обычный скролл.
Основные возможности
- ✅ Свободная прокрутка без snap к слайдам
- ✅ Momentum scroll — инерционное движение после свайпа (как в нативных приложениях)
- ✅ Опциональный snap после остановки
- ✅ Настройка скорости и friction
- ✅ Rubberband эффект на границах
Что такое Momentum Scroll?
Momentum scroll (инерционная прокрутка) — это эффект, когда после быстрого свайпа контент продолжает движение по инерции, плавно замедляясь.
Как это работает:
- Быстрый свайп — проведите пальцем/мышью быстро и отпустите
- Инерция — слайдер продолжает двигаться в том же направлении
- Затухание — скорость плавно уменьшается (friction)
- Остановка — движение прекращается естественным образом
Пример: Чем быстрее вы делаете свайп, тем дальше “улетит” слайдер — точно как при прокрутке списка в iPhone или Android!
Интерактивная демонстрация
Свободное перетаскивание
Базовый пример
Free mode с snap
Вы можете включить автоматическую привязку к ближайшему слайду после окончания momentum scroll:
Настройка скорости
Отключение rubberband
По умолчанию включён эффект “резинки” на границах. Вы можете его отключить:
Обычный drag mode
Для сравнения, обычный режим с автоматическим snap к слайдам:
Сравнение режимов
Free Mode (drag: 'free')
- Свободная прокрутка без ограничений
- Momentum scroll с плавным затуханием
- Можно остановиться между слайдами
- Идеально для галерей и каталогов
Free Mode + Snap (drag: 'free' + freeSnap: true)
- Свободная прокрутка с инерцией
- Автоматическое выравнивание после остановки
- Лучшее из двух миров
- Подходит для списков товаров
Normal Mode (drag: true)
- Переключение слайдов свайпом
- Snap во время перетаскивания
- Чёткие переходы между слайдами
- Классическое поведение слайдера
События
Использование с другими модулями
С Peek
С Center
С Loop
Адаптивность
Вы можете переключать режимы на разных экранах:
Примеры использования
Галерея изображений
Каталог товаров
Особенности
Производительность
Free mode использует requestAnimationFrame для плавной анимации и translate3d для аппаратного ускорения.
Focusable элементы
По умолчанию drag не работает на интерактивных элементах:
Touch и Mouse
Drag module поддерживает как touch события (на мобильных), так и mouse события (на десктопе).