碰巧看到有个手机网站使用了这个插件，就去了解了一下这个插件，发现还是很实用的一个JQ插件，于是就成为了我目前最常用的插件之一。这个插件的亮点是支持触摸滚动，也就是说可以用在移动端上，同时也可以在PC端上。

Flexslider是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果，具有非常高的可定制性。开发者可以使用Flexslider轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。

目前最新的版本是2.6.2，功能优化相对好一点，如需下载最新版本，到官方网站下载：https://woocommerce.com/flexslider/

特性如下：

1. 简单,语义标记
2. 支持所有主流浏览器
3. 水平/垂直滑动和过渡动画
4. 多滑块支持回调API等等
5. 硬件加速的触摸滑动支持
6. 自定义导航选项

使用方法如下：

首先引用JQ库和和Flexslider插件，以及插件所需要用到的CSS文件

<link rel="stylesheet" href="css/flexslider.css">
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>

如果需要用到内容切换时缓动效果，则在Flexslider插件前引用jquery.easing.js插件，jquery.easing.js插件可自行搜索下载

<script src="js/jquery.easing.min.js"></script>

HTML代码如下

<div class="flexslider">
		<ul class="slides">
			<li><a href="#"><img src="images/1.jpg" /></a></li>
			<li><a href="#"><img src="images/2.jpg" /></a></li>
			<li><a href="#"><img src="images/3.jpg" /></a></li>
		</ul>
	</div>

页面调用Flexslider的JS代码，其中 animation: 'slide' 为插件选项参数，可省略不写，后面会介绍插件选项参数详细信息

<script>
$(function(){
    $('.flexslider').flexslider({animation: 'slide'});
});
</script>

完成以上工作就可以预览页面看实际效果了，如果不正常，请检查js及css路径是否正确。

选项参数设置说明（因为是翻译过来的，意思不太准确）

财产	默认的	描述
namespace	"flex-"	String前缀字符串附加到类的所有元素生成的插件。
selector	".slides > li"	Selector必须匹配一个简单的模式。'{container} > {slide}'。
animation	"fade"	String 切换动画类型,"fade"或"slide"。
easing	"swing"	内容切换时缓动效果，需要jquery easing插件支持
direction	"horizontal"	String控制动画方向,"horizontal"或"vertical"
reverse	false	Boolean反向动画方向。
animationLoop	true	Boolean给出了滑块无缝的无限循环。
smoothHeight	false	Boolean顺利推动滑块的高度不同高度的幻灯片。
startAt	0	Number数组的起始滑动滑块,在符号。
slideshow	true	Boolean自动设置滑块的幻灯片动画。
slideshowSpeed	7000	Number设置幻灯片的速度骑自行车,以毫秒为单位
animationSpeed	600	Number设置动画的速度,以毫秒为单位
initDelay	0	Number设置一个初始化延迟,以毫秒为单位
randomize	false	Boolean随机幻灯片顺序,在负载
pauseOnAction	true	Boolean与控制交互时暂停幻灯片元素。
pauseOnHover	false	Boolean暂停幻灯片当悬停在滑块,然后恢复当不再徘徊。
useCSS	true	Boolean滑块将使用CSS3转换,如果可用
touch	true	Boolean启用允许触摸滑动滑块的导航设备
video	false	Boolean可以防止使用CSS3 3 d变换,避免图形故障
controlNav	true	Boolean创建分页导航控制每个幻灯片。
customDirectionNav	""	jQuery Object/Selector容器使用自定义导航标记。
directionNav	true	Boolean创建之前/下箭头导航。
prevText	"Previous"	String设置文本的“前”directionNav项
nextText	"Next"	String设置文本的“下一个”directionNav项
keyboard	true	Boolean允许滑块通过键盘左/右导航键。
multipleKeyboard	false	Boolean让键盘导航影响多个滑块。
mousewheel	false	Boolean(依赖)允许滑块通过mousewheel导航
pausePlay	false	Boolean创建暂停/播放元素来控制滑块幻灯片。
pauseText	"Pause"	String设置文本的“暂停”pausePlay项
playText	"Play"	String设置文本的“玩”pausePlay项
controlsContainer	""	jQuery Object/Selector容器应附加的导航元素。
manualControls	""	jQuery Object/Selector用于代替动态定义元素controlNav。
sync	""	Selector镜子与另一个滑块滑块上的执行的操作。
asNavFor	""	Selector把滑块变成一个缩略图导航为另一个滑块。
itemWidth	0	Number框模型宽度个人旋转木马的项目,包括水平边框和填充。
itemMargin	0	Number旋转木马项目之间。
minItems	0	Number最小数量的旋转木马的物品应该是可见的。
maxItems	0	Number最大数量的旋转木马的物品应该是可见的。
move	0	Number旋转木马的物品数量应继续动画。
start	empty	Function火灾时,滑块加载第一张幻灯片。
before	empty	Function火灾与每个滑块异步动画。
after	empty	Function火灾后每个滑块动画完成。
end	empty	Function火灾时滑到最后一张幻灯片(异步)。
added	empty	Function火灾之后添加一个幻灯片。
removed	empty	Function

如需了解更多功能，可到官网了解，官网介绍的比较详细。
https://woocommerce.com/flexslider/