Jquery touch swipe slider for mobile
I created a slider with jquery touch swipe..my images are 827*1169 so i want to show 2 images in landsacpe and one image in portrait mode for all mobile devices
How can that be achieved?
Thanks
- <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- META -->
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type = 'text/javascript' src = 'jquery-1.7.min.js'></script>
<script type="text/javascript" src="jquery.cycle.js"></script>
<script type="text/javascript" src="jquery.touchwipe.js"></script>
</head>
<body>
<div id="imagegallery">
<img src="images/p1.jpg" />
<img style="display: none" src="images/p2.jpg" />
<img style="display: none" src="images/p3.jpg" />
<img style="display: none" src="images/p4.jpg" />
<img style="display: none" src="images/p5.jpg" />
<img style="display: none" src="images/p6.jpg" />
</div>
<p><a id="prev" href="#">«</a> <a id="next" href="#">»</a>
<script type="text/javascript"><!--
$(document).ready(function() {
$('#imagegallery').cycle({
timeout: 0,
fx: 'scrollHorz',
next: '#next',
prev: '#prev'
});
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery").cycle("next");
},
wipeRight: function() {
$("#imagegallery").cycle("prev");
}
});
});
// --></script>
</p>
</body>
</body>
</html>