Какая логика расчета в слайдерах для перетаскивание?

Question

[Вазген Алексанян]

вот например slick работает по перетаскиванием. вот только slick и тому подобные слайдеры не всегда хватают на работе. потому что есть слайдера где нужно чтобы часть слайда появился с право половина с лева. это все дело реализую нет проблем. проблем в том что клиент хочет чтобы работал подобный слайдер еще и по перетаскиванием.
Не как не ловлю логику перетаскивание.
пробовал что то подобное -
let downX = e.clientX, downY = e.clientY;
if(ev.clientX > downX + 3 && ev.clientY == downY){работает слайдер в правую сторону} слайдер работает но совсем хреново.
я тут не все написал ведь кто в курсе дело уже понял о чем я.

Answer 1

[sferos]

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

Comments

[Вазген Алексанян]

нет не через transform. это же как slick вы рассказали. но смотрите о чем я нужна логика или чатсть кода что ли. который заставляет листаться слайдеру. там ведь играют с координаторами x y. рассчитывают что то. вот что интересно.

[Вазген Алексанян]

ev.clientX > downX + 3 && ev.clientY == downY
подобий расчет ведь должен быть что бы сказать слайдеру - работай.

Answer 2

[hzzzzl]

событие pointerdown - сохраняешь начальную event.clientX
событие pointerup - смотришь конечную event.clientX, сравниваешь расстояние между ними

для пущей убедительности можно еще сравнить время этих двух евентов чтобы вычислить "скорость" пролистывания :)

&& ev.clientY == downY

так никогда не получится, чтобы реально ни на пиксель вверх или вних мышку не подвинул, хватит сравнить только X-координату

Comments

[Вазген Алексанян]

let downX = e.clientX, downY = e.clientY; -
вот это я взял на mousedown.
ev.clientX > downX + 3 && ev.clientY == downY -
а это уже когда mousemove

а уже по mouseup удалял mousemove.