Accelerometer-enabled and Responsive jQuery Slider Plugin - accelerometerSlider
| File Size: | 1.26MB |
|---|---|
| Views Total: | 1593 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
accelerometer Slider is a jQuery content slider plugin especially designed for touch-enabled devices that supports accelerometer functionality and device orientation / device motion detection on accelerometer-equipped devices. Check more demo pages in the zip for more information and examples.
Features:
- Responsive design.
- Supports sliding any html elements, not only images.
- Supports hardware accelerated transitions using CSS3.
- Slides between items with swipe, shake, or mouse drag on desktop.
Basic Usage:
1. Markup html structure.
<div id="slider"> <img alt="" src="images/image-1.jpg" width="624" height="345"> <img alt="" src="images/image-2.jpg" width="624" height="345"> <img alt="" src="images/image-3.jpg" width="624" height="345"> <img alt="" src="images/image-4.jpg" width="624" height="345"> <img alt="" src="images/image-5.jpg" width="624" height="345"> <div class="slider-content"> <h3>Your Title</h3> Slider Content</div> </div>
2. Load the jQuery library and jQuery accelerometer Slider plugin at the bottom but before <body> tag.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.accelerometerSlider.min.js"></script>
3. Call the plugin to enable the slider.
$(document).ready(function() {
$('#slider').accelerometerSlider( {
responsive : true
});
});
</script>
4. All the default options.
$(document).ready(function() {
$('#slider').accelerometerSlider( {
on : 'orientation', 'motion' or 'none',, // default = orientation
minGamma : 25, // min. movement of device (on device orientation) before slide starts
resetGamma : 15
sensibility : 4, // sensibility of device movement (on device motion)
minTime : 500, // min. time before next slide can start
callback : null, // callback function after slide
effect : 'fade', // slide effect - 'fade', 'slidein', 'slideinout' or 'toss'
effectDuration : 500, // duration of effect (transition or animation)
movePercent : 20, // min. finger movement on touchmove before slide starts - in percent
responsive : false or true, // full responsive functionality
responsiveSpeed : 200, // responsive speed
responsiveWidth : '', // width will be set after slide - eq. 'auto' (you dont need to set this)
responsiveHeight: '', // height will be set after slide - eq. 'auto' (you dont need to set this)
acceleration : true, // hardware acceleration (css transition) will be used - if device supports it
exclude : '.slider-content' // slider content container to exclude from slide
});
});
</script>
Change log:
v0.9.7 (2013-11-05)
- Update jquery.accelerometerSlider.js
v0.9.6 (2013-11-04)
- Update jquery.accelerometerSlider.min.js
- Update demo5.html
This awesome jQuery plugin is developed by logioncms. For more Advanced Usages, please check the demo page or visit the official website.
