Accelerometer-enabled and responsive jQuery slider plugin

This responsive jQuery slider plugin is a content slider, designed especially for touch-enabled devices with accelerometer support.

Responsive jQuery slider with accelerometer control – accelerometerSlider

A lightweight image / content slider, with enabled accelerometer functionality and device orientation / device motion detection on accelerometer-equipped devices.

Just turn the smartphone to the left or right side, or shake. Additional functionality is detecting single finger swipes and falls back to mouse ‘drags’ on the desktop.

This responsive jQuery slider plugin supports hardware accelerated transitions:

-moz-transition

-webkit-transition

-o-transition

and transition.

It falls back to Javascript CSS animation if hardware acceleration is not supported (so the plugin works in older browsers).

Accelerometer slider plugin
Accelerometer slider plugin

Example

HTML:

<div id="slider"> 
  <img border="0" alt="" src="image-1.jpg" width="350" height="194">
  <img border="0" alt="" src="image-2.jpg" width="350" height="194">
  <img border="0" alt="" src="image-3.jpg" width="350" height="194">
  <img border="0" alt="" src="image-4.jpg" width="350" height="194">
  <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  </div>
  <div class="slider-content">
    <h3>your title</h3>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  </div>
</div>

JS:

$('#slider').accelerometerSlider( { options } );

The full list of options is explained at project page.

Demos:

http://www.medienservice-ladewig.de/demo/demo1.htm

Get the plugin from GitHub:

https://github.com/logioncms/accelerometerSlider

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest1