jQuery幻灯片插件FlexSlider

分类:代码 日期:

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 幻灯片删除后的回调
查看演示

下载本素材需消耗 50 积分

无法下载?立即反馈