Accelerometer Content - Image Slider - JQuery Plugin - Source

AccelerometerSlider 0.9.7 - JQuery Plugin - Content / Image Slider

AccelerometerSlider - best used on mobile devices like iPhone or any other modern Smartphone


Demos | Download | Github


A JQuery lightweight (4k zipped) Image / Content Slider with enabled accelerometer functionality and device orientation / device motion detection on accelerometer-equipped devices. Best used on touch devices - like iPhone, Smartphones, Tablets etc - but works on desktop computers too.

Works in your existing responsive environment out of the box. You don't need any additional css.

Just turn your Smartphone to the left or right side / or shake your smartphone if "on motion" is set.

Detects single finger swipes and falls back to mouse 'drags' on the desktop. Responsive Design ready (was a goal).

Supports hardware accelerated transitions : -moz-transition, -webkit-transition, -o-transition, transition and falls back to Javascript CSS Animation if HW acceleration is not supported. So it works on older Browsers.

Experimental feature: can be used as a lightweight content animator

Code


<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. Aenean commodo ligula eget dolor. Aenean massa.
    </div>
    <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>                                
    <div class="slider-content">
        <h3>your title</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.accelerometerSlider.min.js"></script> <script type="text/javascript"> $(document).ready(function() {     $('#slider').accelerometerSlider( { options }); });

Options

on : 'orientation', 'motion' or 'none', // default = orientation

orientation : 'west' or 'north' // default = west. turn your smartphone left/right (west) or up/down (north)

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


Instance Methods

$('#slider').data('accelerometerSlider').next();

next()

$('#slider').data('accelerometerSlider').prev();

prev()

var $('#slider').data('accelerometerSlider').add(dom element);

add()

var $('#slider').data('accelerometerSlider').remove();

remove()

var size = $('#slider').data('accelerometerSlider').size();

size()

var position = $('#slider').data('accelerometerSlider').position();

position()

var dom_element = $('#slider').data('accelerometerSlider').current();

current()

$('#slider').data('accelerometerSlider').destroy();

destroy()

$('#slider').data('accelerometerSlider').startSwipe ( { options } )

startSwipe( { options } )

$('#slider').data('accelerometerSlider').responsive ( dom element, width, height, duration )

responsive (dom element, width, height, duration)