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:




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



<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">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  <div class="slider-content">
    <h3>your title</h3>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


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

The full list of options is explained at project page.


Get the plugin from GitHub: