Слайдер на javascript?

Question

[Unknown]

Привет!
Вопрос не о том "как создать слайдер на js", а о конкретном движении слайдера.
Есть ТЗ в котором заказчик желает, чтобы слайдер на мобильных устройствах (разрешение < 900px) при прокрутке (с помощью пальчика) вставал в определенную позицию.
Вот пример того, что я хочу объяснить, в этом примере мы не сильно крутим колесо мыши вниз и получаем след. слайд, который встает в нужные нам координаты.
Еще пример с сайта owlcarousel.
Прикладываю гифку для наглядности


И, собственно, вопрос:
С помощью каких действий/функции мне можно добиться такого результата?
Пожалуйста не рекомендуйте использовать плагины или jquery мне необходим js.
Спасибо!

Comments

[alvvi]

Почему бы просто не подсмотреть реализацию в том же owl carousel и переписать на js? Вещь то довольно простая по своей сути.

[Stalker_RED]

Вы так говорите, будто jQuery и плагины не на js написаны, а на эльфийском, например.

[Unknown]

Илья Ростопка, если простая, то прошу Вас ответить на вопрос.
Stalker_RED, html это язык програмирования

[Stalker_RED]

Richswitch, html это язык разметки.

[alvvi]

Richswitch, ок
с помощью эвентов mousedown, mouseup, touchstart, touchend и грамотного подсчета координат.
Я ответил на ваш вопрос, но вам это ведь никак не поможет, верно?

[Unknown]

Илья Ростопка, спасибо, посмотрю. Если не поможет я вам отпишу)

[Unknown]

Stalker_RED, css это язык разметки

[Сергей delphinpro]

mousedown/touchstart - запоминаем координаты клика/тапа
mousemove/touchmove - двигаем слайды вместе с мышкой/пальцем
mouseup/touchend - сравниваем координаты начала движения (которые запомнили) и окончания. Далее, например, если слайды сдвинуты на менее чем половину ширины слайда - возвращаем слайды в исходную позицию, если более - в следующую. Если движение произошло более чем на один слайд, то смещаем на количество полных слайдов + применяем ту же логику для последнего слайда.

Только не понятно, зачем это всё писать самому, если всё уже тыщу раз написано и выложено в интернет. Если только для прокачки скилла.

[Stalker_RED]

Richswitch,

css это язык разметки

Это юмор такой?

[Unknown]

Сергей, не могли бы вы написать свой вариант получения координат для события touchstart?

Answer 1

[Stalker_RED]

Грубо, в три строчки: https://jsfiddle.net/p887kmjk/
Добавьте своих событий для пальцев и перетягивания.
Можно добавить условие, чтобы возвращало назад, если сдвинуто слишком слабо.

Comments

[Unknown]

сразу бы так и написали, спасибо. Попробую адаптировать под себя