flux.slider
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).
使用Flux Slider jQuery插件今天,我将回顾一下新鲜而酷的Slider插件– Flux (实现示例)。 该滑块使用CSS3动画,具有出色的过渡效果(例如:条形,拉链,百叶窗,块,同心,翘曲)。 而且,最棒的是–现在它也可以支持3D过渡(bars3d,cube,tiles3d,Blinds3D效果)。 当然,并不是所有的浏览器都支持3D转换(我在Chrome中进行了测试-可以确认它在这里可以正常工作)。
Here are list of supported browsers:
以下是受支持的浏览器列表:
- Chrome Chrome
- Firefox 4 Firefox 4
- iOS 的iOS
- Opera 11 歌剧11
- Safari 苹果浏览器
Firstly – you can download our package and check demo:
首先–您可以下载我们的软件包并查看演示:
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Lets start coding !
让我们开始编码!
步骤1. HTML (Step 1. HTML)
Here are source code of our sample:
这是我们示例的源代码:
index.html (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>
<!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.
此页面包含一组图像(用于滑块),以及不同的其他控件(当然这不是必需的,但是它将演示所有可能性):用于选择下一张图像的过渡效果,以及用于控件:播放/暂停/下一个/上一个纽扣。
步骤2. CSS (Step 2. CSS)
Here are used CSS file with styles of our demo:
以下是带有我们演示样式CSS文件:
css / main.css (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;
}
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.
该滑块的所有样式–可自定义。 您可以用边框包裹整个画廊,应用任何背景颜色,更改分页元素的样式-任何您想要的。
步骤3. JS (Step 3. JS)
Here are all JS files:
这是所有JS文件:
js / main.js (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);
});
});
$(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:
初始化本身非常容易–通过调用其构造函数:new flux.slider。 作为参数-指向滑块的选择器('#slider'),以及一组参数:自动播放,分页,延迟。 我们还可以设置另一个参数:转换(作为数组)以及要使用的所有转换名称。 这是所有其他必需文件:
js / jquery-1.5.2.min.js和js / flux.min.js (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.
这是默认的jQuery库和我们的新插件。 在我们的包装中可用。
现场演示
结论 (Conclusion)
Today I told you how to build slider using flux plugin. Sure that you will happy to use it. Good luck!
今天,我告诉您如何使用助焊剂插件构建滑块。 确保您会乐于使用它。 祝好运!
翻译自: https://www.script-tutorials.com/using-flux-slider-jquery-plugin/
flux.slider