2017年10月30日 星期一

[ JQuery ] Jquery bxSlider參數說明


$(document).ready(function(){
  $('ul').bxSlider({
    alignment: 'horizontal',        // 'horizontal', 'vertical' - 幻燈片方向
    controls: true,                 // 設置是否上一個/下一個按鈕是否顯示
    speed: 500,                     // 速度,單位為毫秒
    pager: true,                    // 是否顯示頁碼
    pager_short: false,             // 是否顯示短頁碼 (1/4)
    pager_short_separator: ' / ',   // 用於區分短頁碼的文本
    margin: 0,                      // 間隔
    next_text: 'next',              // 下一個文本
    next_image: '',                 // 下一個圖片
    prev_text: 'prev',              // 上一個圖片
    prev_image: '',                 // 上一个图片
    auto: false,                    // 是否自動切換
    pause: 3500,                    // 停留時間 (auto mode only) 
    auto_direction: 'next',         // 向那個方向移動 (auto mode only)
    auto_hover: true,               // 設置鼠標懸停的時候是否暫停
    auto_controls: false,           // 設置是否顯示 'start'/'stop' 按鈕 (auto mode only)
    ticker: false,                  // determines if slideshow will behave as a constant ticker
    ticker_controls: false,         // determines if 'start'/'stop' ticker controls are displayed (ticker mode only)
    ticker_direction: 'next',       // order in which slides will transition (ticker mode only)
    ticker_hover: true,             // determines if slideshow will pause while mouse is hovering over slideshow
    stop_text: 'stop',              // 'stop' 按鈕文本
    start_text: 'start',            // 'start' 按鈕文本
    wrapper_class: 'bxslider_wrap', // 外面 wapper 的 DIV 的 class 名字
    InfiniteLoop: true              //最後一張點擊"下一步",反覆輪回第一張(true);最後一張停住,不要反覆輪回第一張(false)
  });
});