jQuery幻灯片插件FlexSlider
简介
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 | 幻灯片删除后的回调 | 无 |
