jQuery幻燈片插件FlexSlider

拉丁傳說 2018-4-13 1304

FlexSlider 是一個基于 jQuery 的幻燈片插件,它的功能非常強大,具有以下特點:

  • 標簽很簡單
  • 水平/垂直滑動或淡入淡出動畫
  • 支持縮略圖
  • 多種方式控制,包括鼠標點擊、鼠標滾輪、鍵盤控制
  • 自定義導航選項
  • 多滑塊支撐,豐富強大的回調 API
  • 響應式設計
  • 支持所有主流瀏覽器
  • 兼容 jQuery 最新版本
  • 硬件加速

總之,FlexSlider 就是一個非常強大的幻燈片插件,通過下面眾多的參數就可以看出。同時,FlexSlider 的 CSS 可以自行編寫,配合參數,可以制作出各種各樣的幻燈片。

兼容性

上面已經說到,FlexSlider 兼容所有主流瀏覽器。

參數

以下參數基于 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 幻燈片刪除后的回調

演 示 下 載

最新回復 (0)
返回
發新帖
下载麻将游戏四人麻将