Download
User Rating: 4.5/5 ( 1 votes)
dragend JS is a touch ready, full responsive, content swipe script. It's open source and it has no dependencies but you can use hammer.js for crossbrowser support of touch gestures. It also can, but don't has to, used as a jQuery plugin
Features
-
horizontal and vertical swiping
-
mobile and desktop ready
-
lightweight
-
keyboard navigation
-
fullscreen or boxed
-
contend scribe
-
resize adjustment
-
overscroll
-
full responsive
Browser Support
-
Firefox 3.5+
-
Chrome 4+
-
IE 8+ (8 and 9 need hammer JS and jQuery)
-
Safari 4+
-
Safari on iOS 5+
-
Android 2+
Source: github.com
1. INCLUDE JS FILES
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../../dragend.js"></script>
2. HTML
<div id="demo">
<ul>
<li class="first dragend-page"></li>
<li class="dragend-page"></li>
<li class="middle dragend-page"></li>
<li class="dragend-page"></li>
<li class="last dragend-page"></li>
</ul>
</div>
3. JAVASCRIPT
$("#demo").dragend();
4. OPTIONS
-
pageClass: classname selector for all elments that should provide a page
-
direction: "horizontal" or "vertical"
-
minDragDistance: minuimum distance (in pixel) the user has to drag to trigger swip
-
scribe: pixel value for a possible scribe
-
onSwipeStart: callback function before the animation
-
onSwipeEnd: callback function after the animation
-
onDrag: callback on drag
-
onDragEnd: callback on dragend
-
afterInitialize:
-
borderBetweenPages: if you need space between pages add a pixel value
-
duration
-
hammerSettings
-
preventDrag: if want to prevent user interactions and only swipe manualy
5. DESTROY
Call the destroy method to unbind the events and reset the styles
var instance = new Dragend();
instance.destroy();
JS Tutorial
