FlexSlider插件的参数设置

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

Flexslider特性

• 支持滑动和淡入淡出效果。
• 支持水平、垂直方向滑动。
• 支持键盘方向键控制。
• 支持触控滑动。
• 支持图文混排，支持各种html元素。
• 自适应屏幕尺寸。
• 可控制滑动单元个数。
• 更多选项设置和回调函数。

使用

在head标签中添加以下内容：

<link href="//cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/flexslider/2.6.3/jquery.flexslider-min.js"></script>

也可以到cdnjs中自行查找添加。

HTML：

<div class="flexslider"> 
  <ul class="slides"> 
    <li><img src="images/s1.jpg" /></li>
    <li><img src="images/s2.jpg" /></li>
    <li><img src="images/s3.jpg" /></li> 
    <li><img src="images/s4.jpg" /></li> 
  </ul> 
</div>

html按照上面的结构来写即可，需要滚动的内容添加到li中，可添加文字即图片等，下面我们来设置js内容来自定义滚动样式。

jQuery:
调用

$(function() { 
  $(".flexslider").flexslider(); 
}); 

以上写法就可以实现基本的滚动，如果想要更多自定义的设置，来看下面的内容：

$(".flexslider").flexslider({
  allowOneSlide: false,          //只有一张图是否初始化滚动
  animation: "slide",            //图片变换方式：淡入淡出或者滑动"fade" or "slide"
  slideDirection: "horizontal",  //图片滑动时的滑动方向：左右或者上下"horizontal" or "vertical"
  slideshow: true,               //载入页面时，是否自动播放
  slideshowSpeed: 2000,          //自动播放速度毫秒
  animationDuration: 600,        //内容切换时间
  touch: true,                   //是否支持触摸滑动
  directionNav: true,            //是否显示左右控制按钮
  controlNav: true,              //是否显示控制菜单
  keyboardNav: true,             //键盘左右方向键控制图片滑动
  mousewheel: false,             //鼠标滚轮控制制图片滑动
  //itemsWidth: 50,              //设置一个item的宽度
  // minItems: 2,                //一次最少展示滑动内容的单元个数
  // maxItems: 2,                //一次最多展示滑动内容的单元个数
  // move: 1,                    //一次滑动的单元个数
  // prevText: "Previous",       //String:  上一项的文字
  // nextText: "Next",           //String:  下一项的文字
  // pausePlay: false,           //Boolean: 是否显示播放暂停按钮
  // pauseText: 'Pause',         //String:  暂停文字
  // playText: 'Play',           //String: 播放文字
  randomize: false,              //Boolean: 是否随机幻灯片
  slideToStart: 0,               //Integer:  初始化第一次显示图片位置
  animationLoop: true,           //是否循环滚动
  pauseOnAction: true,           //手动滚动内容后，是否暂停滚动
  pauseOnHover: true,            //鼠标悬停内容上，是否暂停滚动
  // controlsContainer: "",      //Selector:  be taken.
  // manualControls: "",         //自定义控制导航
  // manualControlEvent:"",      //String:自定义导航控制触发事件:默认是click,可以设定hover
  // start: function(){},        //加载第一页触发
  // before: function(){},       //每个滚动动画开始时异步触发
  // after: function(){},        //每个滚动动画结束时触发
  // end: function(){}           //滚动到最后一页时异步触发
});

补充
附上官方网站Flexslider