Jquery Slider with CSS3 Animation based image transitions Flux Slider

sponsored

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.

sponsored

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

fluxslider

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:

 

Enhanced by Zemanta

sponsored

Leave a Reply