Today I will make review (example of implementation) of fresh and cool slider plugin – Flux. This slider using CSS3 animation with great transition effects (like: bars, zip, blinds, blocks, concentric, warp). And, what is most great – now it can support 3D transitions too (bars3d, cube, tiles3d, Blinds3D effects). Of course, not all browsers support 3D transitions (I tested in Chrome – can confirm that it working here).
Here are list of supported browsers:
- Chrome
- Firefox 4
- iOS
- Opera 11
- Safari
Firstly – you can download our package and check demo:
[sociallocker]
[/sociallocker]
Lets start coding !
Step 1. HTML
Here are source code of our sample:
index.html
04 |
< meta charset = utf -8 /> |
05 |
< title >Flux Slider example</ title > |
06 |
< link rel = "stylesheet" href = "css/main.css" type = "text/css" /> |
07 |
< script src = "js/jquery-1.5.2.min.js" type = "text/javascript" charset = "utf-8" ></ script > |
08 |
< script src = "js/flux.min.js" type = "text/javascript" charset = "utf-8" ></ script > |
09 |
< script src = "js/main.js" type = "text/javascript" charset = "utf-8" ></ script > |
13 |
< h3 >< a href = "#" >Flux Slider example</ a ></ h3 > |
15 |
< img src = "data_images/pic1.jpg" alt = "" /> |
16 |
< img src = "data_images/pic2.jpg" alt = "" /> |
17 |
< img src = "data_images/pic3.jpg" alt = "" /> |
18 |
< img src = "data_images/pic4.jpg" alt = "" /> |
19 |
< img src = "data_images/pic5.jpg" alt = "" /> |
20 |
< img src = "data_images/pic6.jpg" alt = "" /> |
21 |
< img src = "data_images/pic7.jpg" alt = "" /> |
22 |
< img src = "data_images/pic8.jpg" alt = "" /> |
23 |
< img src = "data_images/pic9.jpg" alt = "" /> |
24 |
< img src = "data_images/pic10.jpg" alt = "" /> |
27 |
< div id = "transitions" > |
28 |
< ul id = "trans2D" class = "transitions" > |
29 |
< li >< b >2D Transitions</ b ></ li > |
30 |
< li >< a href = "#" id = "bars" >Bars</ a ></ li > |
31 |
< li >< a href = "#" id = "zip" >Zip</ a ></ li > |
32 |
< li >< a href = "#" id = "blinds" >Blinds</ a ></ li > |
33 |
< li >< a href = "#" id = "blocks" >Blocks</ a ></ li > |
34 |
< li >< a href = "#" id = "concentric" >Concentric</ a ></ li > |
35 |
< li >< a href = "#" id = "warp" >Warp</ a ></ li > |
37 |
< ul id = "trans3d" class = "transitions" > |
38 |
< li >< b >3D Transitions</ b ></ li > |
39 |
< li >< a href = "#" id = "bars3d" >Bars3D</ a ></ li > |
40 |
< li >< a href = "#" id = "cube" >Cube</ a ></ li > |
41 |
< li >< a href = "#" id = "tiles3d" >Tiles3D</ a ></ li > |
42 |
< li >< a href = "#" id = "blinds3d" >Blinds3D</ a ></ li > |
45 |
< li >< b >Controls</ b ></ li > |
46 |
< li >< a href = "#" id = "start" >Play</ a ></ li > |
47 |
< li >< a href = "#" id = "stop" >Pause</ a ></ li > |
48 |
< li >< a href = "#" id = "next" >Next</ a ></ li > |
49 |
< li >< a href = "#" id = "prev" >Prev</ a ></ li > |
52 |
< div id = "warn" style = "display:none" ></ div > |
This page contain set of images (for slider), and different extra controls (this is not necessary of course, but it will demonstrate all possibilities): for selecting transitions effect for next image, and for control: Play/Pause/Next/Prev buttons.
Step 2. CSS
Here are used CSS file with styles of our demo:
css/main.css
01 |
body{ background : #eee ; margin : 0 ; padding : 0 } |
02 |
.example{ background : #FFF ; width : 500px ; border : 1px #000 solid ; margin : 20px auto ; padding : 15px ;-moz-border-radius: 3px ;-webkit-border-radius: 3px } |
08 |
list-style : none outside none ; |
09 |
padding : 15px !important ; |
11 |
#slider .pagination li { |
15 |
background-color : #888 ; |
16 |
border-radius: 10px 10px 10px 10px ; |
21 |
#slider .pagination li.current { |
22 |
background-color : #000 ; |
29 |
list-style : none outside none ; |
33 |
#transitions ul#trans 2 D { |
All styles of that slider – customizable. You can wrap whole gallery with border, apply any background color, change styles of pagination elements – anything what you want.
Step 3. JS
Here are all JS files:
js/main.js
03 |
if (! flux.browser.supportsTransitions) { |
04 |
$( '#warn' ).text( 'Flux Slider requires a browser that supports CSS3 transitions' ).show(); |
06 |
window.mf = new flux.slider( '#slider' , { |
12 |
$( '.transitions' ).bind( 'click' , function (event) { |
13 |
event.preventDefault(); |
15 |
if ($(event.target).closest( 'ul' ).is( 'ul#trans3d' ) && ! flux.browser.supports3d) { |
16 |
$( '#warn' ).text( "The '" +event.target.innerHTML+ "' transition requires a browser that supports 3D transforms" ); |
19 |
}, 1000, '' , function () { |
20 |
$( this ).animate({opacity: 'hide' }, 1000); |
25 |
window.mf.next(event.target.id); |
27 |
$( '#controls' ).bind( 'click' , function (event) { |
28 |
event.preventDefault(); |
29 |
var command = 'window.mf.' +event.target.id+ '();' ; |
Initialization itself very easy – via calling its constructor: new flux.slider. As params – we pointing selector of our slider (‘#slider’), and set of params: autoplay, pagination, delay. We can also set another one param: transitions (as array) with all names of the transitions to use. Here are all another necessary files:
js/jquery-1.5.2.min.js and js/flux.min.js
This is default jQuery library and our new plugin. Available in our package.
Conclusion
Today I told you how to build slider using flux plugin. Sure that you will happy to use it. Good luck!