Как реализовать swipe-эффект?

Question

[Кирилл]

Создаю свой компонент фотогалереи. Хочу сделать так, чтобы на смартфонах и планшетниках можно было пальцем "листать" слайды.

Как лучше реализовать данный эффект? Есть ли готовые библиотеки?

Answer 1

[GreatRash]

Создаю свой компонент фотогалереи.

Есть ли готовые библиотеки?

0_o

Comments

[Кирилл]

По Swipe имелось в виду)

[GreatRash]

Кирилл: На мобильниках есть два события: touchstart и touchend. У обоих этих событий есть свойство changedTouches, в котором хранятся координаты пальца. На touchstart запоминаем где у нас палец, на touchend снова смотрим где палец. Если разница между началом и концом нулевая, значт у нас был не свайп а клик. Юзер - не робот, поэтому разница эта почти никогда нулевая не будет, нужно выбрать некоторое разумное значение которое считать кликом. Например:

touchstartEvent.changedTouches[0].cliendX - touchendEvent.changedTouches[0].cliendX <= 20 // значит клик

Если разница больше нуля, значит свайп вправо, если меньше, значит влево. Ну а дальше можно фантазировать. Например если диагонали не нужны, то можно сравнивать: если Y > X значит свайп по вертикали и наоборот.

[Кирилл]

GreatRash: Почему-то в переменной события нет поля changedTouches. Правильно я делаю: someObject.on('touchstart', function(e) { }) ? В переменной e нет поля changedTouches

[GreatRash]

Кирилл:

someObject.on('touchstart', function(e) {
  console.log(e.originalEvent.changedTouches);
});

Просто в jQuery не всё есть.

[Кирилл]

GreatRash: Понял, спасибо! А что можно использовать вместо jQuery? Чтобы всё было. Заметил, что разработчики реже стали его использовать.

[GreatRash]

Кирилл: Лично я пока не вижу альтернативы ему.

Answer 2

[Yakov Vylegzhanin]

https://api.jquerymobile.com/swipe/