Flux Slider

Flux slider is a CSS3 animation based image transition framework, inspired in part by the fantastic Nivo Slider jQuery plugin.

Instead of the traditional Javascript timer based animations used by jQuery, Flux utilises the newer, more powerful CSS3 animation technology. Its in a fairly early/rough state at the moment but testing on the iPhone/iPad does appear to produce much smoother animations. Desktop performance (as with Nivo) is very smooth but the use of CSS3 enables us to produce some new effects that Nivo can’t, e.g. rotations.

The aim is to use hardware acceleration where possible to improve performance on less powerful devices, such as mobiles & tablets.

Known to work with

• Safari
• Chrome
• iOS
• Blackberry Playbook
• Opera 11

Usage

Create HTML markup with the images you wish to use. You can also wrap images in a link if you need them to be clickable. For example:

<div id="slider">
    <img src="img/avatar.jpg" alt="" />
    <img src="img/ironman.jpg" alt="" title="Ironman Screenshot" />
    <a href=""><img src="img/imagewithlink.jpg" alt="" /></a>
    <img src="img/tron.jpg" alt="" />
</div>

Next instantiate Flux Slider:

$(function(){
    window.myFlux = new flux.slider('#slider');
});

Read more:https://github.com/joelambert/Flux-Slider