Jquery Slider with CSS3 Animation based image transitions Flux Slider

Flux slider is a nice jQuery image slider with css3 animation based framework. Flux slider utilizes the newer, more powerful CSS3 animation technology. By using CSS3 animations the performance of the slider is improved greatly.

The slider is also compatable with Safari, Chrome, iOS, Blackberry Playbook, Firefox 4, Opera 11 and android.

Implementation of Flux Slider

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');
});

Or, if you’re using the provided jQuery widget then you can also do the following:

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

Note: If you plan to use the Zepto framework then the widget method won’t work

Requirement : Jquery

Download:

Demo:

 

Related articles

• jQuery Slider Plugins for Developers (dzone.com)
• Full Width Responsive Image Slider with jQuery – Slippry (smashingweb.info)
• Free jQuery CSS3 Image Hover Effects Tutorials and Plugins (dzone.com)
• jQuery CSS3 Slider Timeline Menu (jqueryrain.com)