投影片外掛程式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

點擊查看線上樣本

 

投影片外掛程式FlexSlider -- Amaze UI投影片參數