Home » Tutorials

Using Flux Slider jQuery plugin

Tutorials
Author Reading 12 min Views 814 Published by Modified by

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:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Step 3. JS
  6. js/main.js
  7. js/jquery-1.5.2.min.js and js/flux.min.js
  8. Conclusion
Live Demo

[sociallocker]

download in package

[/sociallocker]

Lets start coding !

Step 1. HTML

Here are source code of our sample:

index.html

01 <!DOCTYPE html>
02 <html>
03     <head>
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>
10     </head>
11     <body>
12         <div class="example">
13             <h3><a href="#">Flux Slider example</a></h3>
14             <div id="slider">
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="" />
25             </div>
26             <hr />
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>
36                 </ul>
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>
43                 </ul>
44                 <ul id="controls">
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>
50                 </ul>
51             </div>
52             <div id="warn" style="display:none"></div>
53         </div>
54     </body>
55 </html>

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}
03 /*customization of slider*/
04 #slider {
05     padding:15px 0;
06 }
07 #slider .pagination {
08     list-style:none outside none;
09     padding:15px !important;
10 }
11 #slider .pagination li {
12     cursor:pointer;
13     display:inline-block;
14     margin-left:0;
15     background-color:#888;
16     border-radius:10px 10px 10px 10px;
17     height:8px;
18     text-indent:10000px;
19     width:8px;
20 }
21 #slider .pagination li.current {
22     background-color:#000;
23 }
24 #transitions {
25     overflow:hidden;
26 }
27 #transitions ul {
28     float:left;
29     list-style:none outside none;
30     padding:0;
31     width:33%;
32 }
33 #transitions ul#trans2D {
34     text-align:right;
35 }
36 #transitions ul li {
37     margin:0 10px;
38 }
39 #warn {
40     font-weight:bold;
41     text-align:center;
42 }

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

01 $(function(){
02     // if browser not support transitions at all - we will display some warn message
03     if (! flux.browser.supportsTransitions) {
04         $('#warn').text('Flux Slider requires a browser that supports CSS3 transitions').show();
05     }
06     window.mf = new flux.slider('#slider', {
07         autoplay: true,
08         pagination: true,
09         delay: 5000
10     });
11     // binding onclick events for our transitions
12     $('.transitions').bind('click', function(event) {
13         event.preventDefault();
14         // we will inform member is any 3D transform not supported by browser
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");
17             $('#warn').animate({
18               opacity: 'show'
19             }, 1000, '', function() {
20                 $(this).animate({opacity: 'hide'}, 1000);
21             });
22             return;
23         }
24         // using custom transition effect
25         window.mf.next(event.target.id);
26     });
27     $('#controls').bind('click', function(event) {
28         event.preventDefault();
29         var command = 'window.mf.'+event.target.id+'();';
30         eval(command);
31     });
32 });

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.

Live Demo

Conclusion

Today I told you how to build slider using flux plugin. Sure that you will happy to use it. Good luck!

Rate article
© 2026 Script Tutorials