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 |
幻灯片删除后的回调 |
无 |
演 示 下 载
