Перемещение/Прокрутка изображений вправо и влево с использованием событий мыши с использованием Vanilla Javascript

Question

У меня есть стопка изображений. Когда я перемещаю указатель мыши влево, он должен отображать следующее изображение в стеке. Когда я перемещаю мышь вправо, это приведет меня к другой странице.

JSFiddle demo

<div class="container"> 
    <div class="image1 image"></div> 
    <div class="image2 image"></div> 
    <div class="image3 image"></div> 
    <div class="image4 image"></div> 
    <div class="image5 image"></div> 
</div> 

Конструкция очень похожа на [трутом применение на телефонах]. Вот несколько ссылок, где это достигается с помощью JQuery:

Tinder Animation

Swipe Cards

Как я могу сделать это с чистым JavaScript?

Answer 1

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