Как сделать свайп на JS?

Question

[konstant1n13]

Как сделать на чистом JS свайп? Мне нужно, чтобы при нажатии, удержании и движении левой кнопки мыши/пальца картинка в слайдере шла за курсором/пальцем. И при отжатии курсора/пальца, слайд перемещался в том случае, если свайп был больше чем на четверть или треть родительского элемента. Короче, так же, как и в slick-слайдере это работает:
https://kenwheeler.github.io/slick/

Comments

[Rustam Bainazarov]

Для этих целей создают целые библиотеки. Нюансов куча. Изучайте, как сделан тот же Swiper, можете даже форк сделать.

Answer 1

[Mike Khromov]

Как только поджигается евент mouseover, считаешь миллисекунды до mouseout.
Если mouseout в течении примерно 250мс не произошло то понимаешь что это был слайд. А дальше все просто.
Высчитываешь на сколько переместился курсор в лево или право и на столько двигаешь свою картинку. Скорость с которой двигать тоже можно по формуле из школьной программы.
С последним тоже все просто, если mouseout произашел когда мышка проделала путь равный 1/4 или 1/3 шириный родительского элемента, просто докручиваешь картинку.

Answer 2

[Игорь]

Нет, единого API для этого нет. Есть Touch API и MouseEvent API. Я бы вам посоветовал не придумывать велосипед когда придумали мотоцикл.

Короче, так же, как и в slick-слайдере это работает

А что вам мешает посмотреть исходный код slick-слайдера?

Answer 3

[Дима Паутов]

Что бы сделать свайп как вы хотите, придётся написать много кода. Врятли кто-то захочет это делать.
Если вы хотите научиться делать подобные вещи, то у публичных библиотек есть github репозитории, в которых можно увидеть реализацию тех или иных фич. Зайдите и поглядите как описаны swipe методы там. Вот и будет ответ.