jQuery Sliders

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="" />

Next instantiate Flux Slider:

    window.myFlux = new flux.slider('#slider');

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

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

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

Requirement : Jquery




Enhanced by Zemanta

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.