幻灯片插件FlexSlider -- Amaze UI幻灯片参数

时间：2015-11-19 13:07:31 阅读：173 评论：0 收藏：0 [点我收藏+]

标签：

用了Amaze UI 的人就知道，其幻灯片插件是 data-am-slider=‘{}‘来传参数的：（以下代码来自Amaze UI 官网）

 <div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider=‘{}‘ >
  <ul class="am-slides">
      <li>
            <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">
         
      </li>
      <li>
            <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">
         
      </li>
      <li>
            <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">
         
      </li>
      <li>
            <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">
         
      </li>
  </ul>
</div>

FlexSlider 是一个基于 jQuery 的幻灯片插件，它的功能非常强大，具有以下特点：

标签很简单
水平/垂直滑动或淡入淡出动画
支持缩略图
多种方式控制，包括鼠标点击、鼠标滚轮、键盘控制
自定义导航选项
多滑块支撑，丰富强大的回调 API
响应式设计
支持所有主流浏览器
兼容 jQuery 最新版本
硬件加速

总之，FlexSlider 就是一个非常强大的幻灯片插件，通过下面众多的参数就可以看出。同时，FlexSlider 的 CSS 可以自行编写，配合参数，可以制作出各种各样的幻灯片。

参数

以下参数基于 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	幻灯片删除后的回调	无

FlexSlider官网：http://www.woothemes.com/flexslider/

Github托管地址：https://github.com/woothemes/FlexSlider