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
[sociallocker]
download in package
[/sociallocker]
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
Conclusion
Today I told you how to build slider using flux plugin. Sure that you will happy to use it. Good luck!