FlexSlider 是一个基于 jQuery 的幻灯片插件,它的功能非常强大,具有以下特点:
- 标签很简单
- 水平/垂直滑动或淡入淡出动画
- 支持缩略图
- 多种方式控制,包括鼠标点击、鼠标滚轮、键盘控制
- 自定义导航选项
- 多滑块支撑,丰富强大的回调 API
- 响应式设计
- 支持所有主流浏览器
- 兼容 jQuery 最新版本
- 硬件加速
总之,FlexSlider 就是一个非常强大的幻灯片插件,通过下面众多的参数就可以看出。同时,FlexSlider 的 CSS 可以自行编写,配合参数,可以制作出各种各样的幻灯片。
兼容性
上面已经说到,FlexSlider 兼容所有主流浏览器。
参数
以下参数基于 FlexSlider 2.2.0 版本。
参数 |
说明 |
默认值 |
namespace |
命名空间,如果有多个幻灯片,且样式不一样,可以使用该属性为不同的幻灯片加上不同的名字 |
无 |
selector |
|
|
animation |
幻灯片切换方式,可以选 fade 或 slide |
fade |
easing |
|
swing |
direction |
选择 slide 切换方式为水平或垂直 |
horizontal(水平) |
reverse |
选择 slide 切换方式为反向 |
|
animationLoop |
是否循环 |
true |
startAt |
幻灯片从第几张开始 |
0 |
slideshow |
是否自动播放 |
true |
slideshowSpeed |
幻灯片切换间隔,单位为毫秒 |
7000 |
animationSpeed |
幻灯片动画切换时间 |
600 |
initDelay |
幻灯片延迟多久播放,单位为毫秒 |
0 |
randomize |
幻灯片是否随机排列 |
false |
可用性 |
pauseOnAction |
操作幻灯片时是否暂停自动播放 |
true |
pauseOnHover |
鼠标悬停时是否暂停自动播放 |
|
useCSS |
是否使用 CSS3 过度动画 |
true |
touch |
是否允许在触摸设备上触摸控制 |
true |
video |
是否在幻灯片上使用视频,将防止对 CSS3 3D 变换,以避免故障的图形 |
false |
主控制 |
controlNav |
是否显示底部导航 |
true |
directionNav |
是否显示左右(上一张/下一张)控制 |
true |
prevText |
设置“上一张”按钮显示的文字 |
Previous |
nextText |
设置“下一张”按钮显示的文字 |
nextText |
副导航 |
keyboard |
是否允许键盘控制 |
true |
multipleKeyboard |
允许键盘导航来影响多个滑块。默认行为削减了键盘导航与多个滑块存在。 |
false |
mousewheel |
是否通过鼠标滚轮控制,需要配合 jquery.mousewheel.js |
false |
pausePlay |
是否开启“播放/暂停”按钮 |
false |
pauseText |
“暂停”按钮的文字 |
Pause |
playText |
“播放”按钮的文字 |
Play |
特殊属性 |
controlsContainer |
使用类选择器。声明哪些容器的导航元素应该被追加了。默认的容器是FlexSlider元素。例如使用会“。flexslider容器”。如果没有找到指定的元素属性将被忽略。 |
无 |
manualControls |
声明自定义控件导航 |
无 |
sync |
|
|
asNavFor |
|
|
Carousel Options |
itemWidth |
|
0 |
itemMargin |
|
0 |
minItems |
|
0 |
maxItems |
|
0 |
move |
|
0 |
回调 |
start |
幻灯片开始前的回调 |
无 |
before |
每个幻灯片开始前的回调 |
无 |
after |
每个幻灯片结束后回调 |
|
end |
幻灯片结束后的回调 |
无 |
added |
幻灯片增加后的回调 |
无 |
removed |
幻灯片删除后的回调 |
无 |
演 示 下 载