hubSlider是一款jQuery和CSS3超酷3D堆叠式幻灯片插件。该幻灯片将各个slide堆叠在一起,利用jquery,CSS3 transforms和transitions来制作上下切换的堆叠幻灯片效果。
安装
可以通过bower来安装该幻灯片。
bower install hubslider
使用方法
使用该幻灯片插件需要在页面中引入jquery,hubslider.js文件。
HTML结构
该幻灯片的基本HTML结构如下:
CSS样式
以下是该幻灯片的一些必要的CSS样式。
.hub-slider { position: relative; }
.hub-slider ul { list-style: none; }
.hub-slider ul li {
width: 800px;
height: 300px;
background: #add8e6;
position: absolute;
left: 0;
top: 0;
}
.hub-slider-controls {
position: absolute;
right: 0;
top: 0;
z-index: 1000;
}
.hub-slider-arrow {
width: 40px;
height: 40px;
border: none;
background: #f00;
color: #fff;
font-weight: bold;
}
初始化插件
在页面DOM元素加载完毕之后,可以通过hubSlider()方法来初始化该幻灯片插件。
$('.hub-slider-slides ul').hubSlider({
selector: $('li'),
button: {
next: $('.hub-slider-arrow_next'),
prev: $('.hub-slider-arrow_prev')
}
});
配置参数
该幻灯片插件的可用的配置参数如下:
selector:幻灯片slide的选择器,默认为null。
button:前后导航按钮,button.next是向后按钮的选择器,button.prev是向前按钮的选择器。
auto:是否自动播放,默认为false。
time:自动播放的持续时间,默认为3秒。
opacity:当前幻灯片的透明度,默认为1。
opacityStep:透明度向后递减,默认为0.2。
startOffset:开始偏移值,默认为20像素。
offset:偏移值,默认为0。
scale:缩放值,默认为1。
scaleStep:slide向后递减缩小,默认为"0.05"。
transition:动画过渡时间,默认为"0.6s"。