1. 程式人生 > >flexSlider 圖片輪播外掛的使用(附引數設定)

flexSlider 圖片輪播外掛的使用(附引數設定)

  animation: "slide",             // String: ["fade"|"slide"],動畫效果
  easing: "swing",                // String: 滾動動畫計時函式
  direction: "horizontal",        // String: 滾動方向 ["horizontal"|"vertical"]
  reverse: false,                 // Boolean: 翻轉 slide 運動方向
  animationLoop: true,            // Boolean: 是否迴圈播放
  smoothHeight: false,            // Boolean: 當 slide 圖片比例不一樣時
                                  // "true": 父類自動適應圖片高度
                                  // "false": 不自動適應,父類高度為圖片的最高高度,預設為false

  startAt: 0,                     // Integer: 開始播放的 slide,從 0 開始計數
  slideshow: true,                // Boolean: 是否自動播放
  slideshowSpeed: 5000,           // Integer: ms 滾動間隔時間
  animationSpeed: 600,            // Integer: ms 動畫滾動速度
  initDelay: 0,                   // Integer: ms 首次執行動畫的延遲
  randomize: false,               // Boolean: 是否隨機 slide 順序

  // Usability features
  pauseOnAction: true,            // Boolean: 使用者操作時停止自動播放
  pauseOnHover: false,            // Boolean: 懸停時暫停自動播放
  useCSS: true,                   // Boolean: 是否使用 css3 transition
  touch: true,                    // Boolean: 允許觸控式螢幕觸控滑動滑塊
  video: false,                   // Boolean: 使用視訊的 slider,防止 CSS3 3D 變換毛刺

  // Primary Controls
  controlNav: true,               // Boolean: 是否建立控制點
  directionNav: true,             // Boolean: 是否建立上/下一個按鈕(previous/next)
  prevText: "Previous",           // String: 上一個按鈕文字,可為html元素
  nextText: "Next",               // String: 下一個按鈕文字,可為html元素

  // Secondary Navigation
  keyboard: true,                 // Boolean: 是否開啟鍵盤左(←)右(→)控制
  multipleKeyboard: false,        // Boolean: 是否允許鍵盤控制多個 slide
  mousewheel: true,               // Boolean: 是否開啟滑鼠滾輪控制
  pausePlay: false,               // Boolean: 是否建立暫停與播放按鈕
  pauseText: 'Pause',             // String: 暫停按鈕文字
  playText: 'Play',               // String: 播放按鈕文字

  // Special properties
  controlsContainer: "",          // jQuery Object/Selector
  manualControls: "",             // jQuery Object/Selector 自定義控制 slider 的元素,
                                  // 如 "#tabs-nav li img",導航數量和 slide 數量一樣
  sync: "",                       // Selector: 關聯 slide 與 slide 之間的操作。
  asNavFor: "",                   // Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

  // Carousel Options
  itemWidth: 0,                   // Integer: slide 寬度,多個同時滾動時設定
  itemMargin: 0,                  // Integer: slide 間距
  minItems: 1,                    // Integer: 最少顯示 slide 數, 與 `itemWidth` 相關
  maxItems: 0,                    // Integer: 最多顯示 slide 數, 與 `itemWidth` 相關
  move: 0,                        // Integer: 一次滾動移動的 slide 數量,0 - 滾動可見的 slide

  // Callback API
  start: function(){},            // Callback: function(slider) - 初始化完成的回撥
  before: function(){},           // Callback: function(slider) - 每次滾動開始前的回撥
  after: function(){},            // Callback: function(slider) - 每次滾動完成後的回撥
  end: function(){},              // Callback: function(slider) - 執行到最後一個 slide 的回撥
  added: function(){},            // Callback: function(slider) - slide 新增時觸發
  removed: function(){}           // Callback: function(slider) - slide 被移除時觸發