I have more image, I need swipe up and swipe down functionality for these image in my project. For example, in the iPhone, if I swipe up the image, then the image will go up and the new image will come from the bottom and vice versa.
How do I do this using jQuery Mobile? Below is the code for swipe right and left but I need swipe up and down like this. Anyone help me
<style>
.clip {
height:250px;
width:150px;
overflow: hidden;
}
.pan {
width: 400%;
-o-transition: -o-transform 2s;
-moz-transition: -moz-transform 2s;
-webkit-transition: -webkit-transform 2s;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
.pan img {
display: block;
float: left;
width: 25%;
-moz-user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
</style>
<script>
var position = 0;
function next() {
position -= 25;
if (position <= -100)
position = 0;
update();
}
function prev() {
position += 25;
if (position > 0)
position = 0;
update();
}
function update() {
var pan = document.getElementById("pan");
pan.style.OTransform = "translateX(" + position + "%)";
pan.style.MozTransform = "translateX(" + position + "%)";
pan.style.WebkitTransform = "translateX(" + position + "%)";
}
$(function() {
$(window).bind("swipeleft", next);
$(window).bind("swiperight", prev);
$(window).bind("keydown", function(event) {
if (event.which==38)
prev();
else if (event.which==40)
next();
});
$("img").bind("dragstart", function(ev) { ev.preventDefault(); });
});
<div class="clip">
<div id="pan" class="pan">
<img src="images/logo.jpg" />
<img src="images/53-house.png" />
<img src="images/bg-blue.png" />
<img src="images/bg-sandal.png" />
</div>
</div>