Flexslider具有以下特性：
支援滑動和淡入淡出效果。
支援水平、垂直方向滑動。
支援鍵盤方向鍵控制。
支援觸控滑動。
支援圖文混排，支援各種html元素。
自適應螢幕尺寸。
可控制滑動單元個數。
更多選項設定和回撥函式。
HTML
首先在頁面head部位載入jquery庫檔案和Flexslider外掛，以及Flexslider所需的基本css樣式檔案。

<link rel="stylesheet" type="text/css" href="flexslider.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.flexslider-min.js"></script>
 

然後在body中加入以下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>
 

我們使用了.flexslider來包括所有需要滾動的內容元素，然後使用

這個class非常關鍵，內部的滾動內容都是針對.slides的，然後在
• 內部加入任意html元素，包括圖片和文字。
  jQuery
  呼叫Flexslider外掛非常簡單，使用如下程式碼：

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

然後預覽網頁效果，一個內容切換效果就完成了，當然想要更多個性化設定，flexslider提供了豐富的選項配置以及回撥函式絕對可以滿足大多數開發者需求。

Flexslider選項設定
以下引數基於 FlexSlider 2.2.0 版本
引數	描述	預設值
animation	動畫效果型別，有"fade"：淡入淡出，"slide"：滑動	"fade"
easing	內容切換時緩動效果，需要jquery easing外掛支援	"swing"
direction	內容滾動方向，有"horizontal"：水平方向 和"vertical"：垂直方向	"horizontal"
animationLoop	是否迴圈滾動	true
startAt	初始滑動時的起始位置，定位從第幾個開始滑動	0
slideshow	是否自動滑動	true
slideshowSpeed	滑動內容展示時間(ms)	7000
animationSpeed	內容切換時間(ms)	600
initDelay	初始化時延時時間	0
pauseOnHover	滑鼠滑向滾動內容時，是否暫停滾動	false
touch	是否支援觸控滑動	true
directionNav	是否顯示左右方向箭頭按鈕	true
keyboard	是否支援鍵盤方向鍵操作	true
minItems	一次最少展示滑動內容的單元個數	1
maxItems	一次最多展示滑動內容的單元個數	0
move	一次滑動的單元個數	0
回撥函式	start: function(){}, 
           before: function(){},
           after: function(){}, 
           end: function(){}, 
           added: function(){}, 
           removed: function(){}, 
           init: function(){},	-
 

更多Flexslider相關資訊可以訪問Flexslider官網地址：http://www.woothemes.com/flexslider/