Accelerometer-enabled and Responsive jQuery Slider Plugin - accelerometerSlider

File Size: 1.26MB
Views Total: 1586
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Accelerometer-enabled and Responsive jQuery Slider Plugin - accelerometerSlider

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.