In responsive web design, you may need to move the content with your fingers in mobile phones.
SwipeJs is a JavaScript library for touch-enabled mobile slider, which can be downloaded from:
https://github.com/bradbirdsall/Swipe/
The company website:
http://swipejs.com/
My demo:
http://www.jiansenlu.zoka.cc/swipemaster/
To use this code, jquery library and swipe.js are called.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='swipe.js'></script>
swipe.js uses touch events for mobile instead of mouseclick in desktop.
Apples event object for touch events
The event object contains the following arrays:- touches - contains touch information upon touchStart and touchMove not touchEnd events
- targetTouches - contains information for touches originating from the same target element
- changedTouches - contains touch information upon all touch events
http://www.javascriptkit.com/javatutors/touchevents.shtml
We can detect a swipe (left, right, top or down) using event.touch:
http://www.javascriptkit.com/javatutors/touchevents2.shtml
There are several other JavaScript libraries related to swipe feature in mobile phone:
1. http://swipeplanes-jquery.blogspot.com/
2. http://cubiq.org/iscroll-4/
3. dragend JS is another good option.
http://stereobit.github.io/dragend/
4. http://www.jqtouch.com/
5. SwipeView
works both for desktop and tablet/mobile
4. http://www.jqtouch.com/
5. SwipeView
works both for desktop and tablet/mobile
No comments:
Post a Comment