Using Flux Slider jQuery plugin
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:
Live Demo
download in package
Lets start coding !
Step 1. HTML
Here are source code of our sample:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Flux Slider example</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/flux.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="example">
<h3><a href="#">Flux Slider example</a></h3>
<div id="slider">
<img src="data_images/pic1.jpg" alt="" />
<img src="data_images/pic2.jpg" alt="" />
<img src="data_images/pic3.jpg" alt="" />
<img src="data_images/pic4.jpg" alt="" />
<img src="data_images/pic5.jpg" alt="" />
<img src="data_images/pic6.jpg" alt="" />
<img src="data_images/pic7.jpg" alt="" />
<img src="data_images/pic8.jpg" alt="" />
<img src="data_images/pic9.jpg" alt="" />
<img src="data_images/pic10.jpg" alt="" />
</div>
<hr />
<div id="transitions">
<ul id="trans2D" class="transitions">
<li><b>2D Transitions</b></li>
<li><a href="#" id="bars">Bars</a></li>
<li><a href="#" id="zip">Zip</a></li>
<li><a href="#" id="blinds">Blinds</a></li>
<li><a href="#" id="blocks">Blocks</a></li>
<li><a href="#" id="concentric">Concentric</a></li>
<li><a href="#" id="warp">Warp</a></li>
</ul>
<ul id="trans3d" class="transitions">
<li><b>3D Transitions</b></li>
<li><a href="#" id="bars3d">Bars3D</a></li>
<li><a href="#" id="cube">Cube</a></li>
<li><a href="#" id="tiles3d">Tiles3D</a></li>
<li><a href="#" id="blinds3d">Blinds3D</a></li>
</ul>
<ul id="controls">
<li><b>Controls</b></li>
<li><a href="#" id="start">Play</a></li>
<li><a href="#" id="stop">Pause</a></li>
<li><a href="#" id="next">Next</a></li>
<li><a href="#" id="prev">Prev</a></li>
</ul>
</div>
<div id="warn" style="display:none"></div>
</div>
</body>
</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
body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
/*customization of slider*/
#slider {
padding:15px 0;
}
#slider .pagination {
list-style:none outside none;
padding:15px !important;
}
#slider .pagination li {
cursor:pointer;
display:inline-block;
margin-left:0;
background-color:#888;
border-radius:10px 10px 10px 10px;
height:8px;
text-indent:10000px;
width:8px;
}
#slider .pagination li.current {
background-color:#000;
}
#transitions {
overflow:hidden;
}
#transitions ul {
float:left;
list-style:none outside none;
padding:0;
width:33%;
}
#transitions ul#trans2D {
text-align:right;
}
#transitions ul li {
margin:0 10px;
}
#warn {
font-weight:bold;
text-align:center;
}
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
$(function(){
// if browser not support transitions at all - we will display some warn message
if (! flux.browser.supportsTransitions) {
$('#warn').text('Flux Slider requires a browser that supports CSS3 transitions').show();
}
window.mf = new flux.slider('#slider', {
autoplay: true,
pagination: true,
delay: 5000
});
// binding onclick events for our transitions
$('.transitions').bind('click', function(event) {
event.preventDefault();
// we will inform member is any 3D transform not supported by browser
if ($(event.target).closest('ul').is('ul#trans3d') && ! flux.browser.supports3d) {
$('#warn').text("The '"+event.target.innerHTML+"' transition requires a browser that supports 3D transforms");
$('#warn').animate({
opacity: 'show'
}, 1000, '', function() {
$(this).animate({opacity: 'hide'}, 1000);
});
return;
}
// using custom transition effect
window.mf.next(event.target.id);
});
$('#controls').bind('click', function(event) {
event.preventDefault();
var command = 'window.mf.'+event.target.id+'();';
eval(command);
});
});
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
download in package
Conclusion
Today I told you how to build slider using flux plugin. Sure that you will happy to use it. Good luck!
Wow!.. 3D is super…But it works only in Safari. Chrome and FF not working. How to add caption to the pics ??
Hi kumar,
As I read in documentation – here are no support for adding captions/titles.
But it allow to create custom transitions. And possible it will allow you to add code to display captions too.
By default – it generating DIV with background image (our listed images). So as I see – we will need or change sources of this slider (to display custom titles) or make custom transition effect.
Hi, can you help me to add two sliders in the same pages, with pagination and controls?
thanks
LP
2 lucapost
Yes, of course, firstly what you should to create – duplicate and image set and controls. After – assign another ID for your second slider (not same – slider), And then – adjust JS to work with your second copied version too.
Hello,
nice tutorial, just wanted to ask you if there’s a way to turn the pagination into small images.
thanks in advance
Commonly you can enable/disable pagination. But, whole html+css already opened, you can try to play with styles and make own necessary styles for each pagination element
It’s support png file or only jpeg?
Hi Valerio,
I think that this sloder should support most of image formats (png too)