幻燈片插件FlexSlider -- Amaze UI幻燈片參數

用了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

最新版本:2.0

點擊查看在線示例