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