FlexSlider外掛的引數設定

阿新 • • 發佈：2020-09-16

Flexslider特性

支援滑動和淡入淡出效果。
支援水平、垂直方向滑動。
支援鍵盤方向鍵控制。
支援觸控滑動。
支援圖文混排，支援各種html元素。
自適應螢幕尺寸。
可控制滑動單元個數。
更多選項設定和回撥函式。

使用

在head標籤中新增以下內容：

<link href="//cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/flexslider/2.6.3/jquery.flexslider-min.js"></script>

也可以到cdnjs中自行查詢新增。

HTML：

<div class="flexslider"> 
  <ul class="slides"> 
    <li><img src="images/s1.jpg" /></li>
    <li><img src="images/s2.jpg" /></li>
    <li><img src="images/s3.jpg" /></li> 
    <li><img src="images/s4.jpg" /></li> 
  </ul> 
</div>

html按照上面的結構來寫即可，需要滾動的內容新增到li中，可新增文字即圖片等，下面我們來設定js內容來自定義滾動樣式。

jQuery:
呼叫

$(function() { 
  $(".flexslider").flexslider(); 
});

以上寫法就可以實現基本的滾動，如果想要更多自定義的設定，來看下面的內容：

$(".flexslider").flexslider({
  animation: "slide",            //圖片變換方式：淡入淡出或者滑動"fade" or "slide"
  slideDirection: "horizontal",  //圖片滑動時的滑動方向：左右或者上下"horizontal" or "vertical"
  slideshow: true,               //載入頁面時，是否自動播放
  slideshowSpeed: 2000,          //自動播放速度毫秒
  animationDuration: 600,        //內容切換時間
  touch: true,                   //是否支援觸控滑動
  directionNav: true,            //是否顯示左右控制按鈕
  controlNav: true,              //是否顯示控制選單
  keyboardNav: true,             //鍵盤左右方向鍵控制圖片滑動
  mousewheel: false,             //滑鼠滾輪控制製圖片滑動
  // minItems: 2                 //一次最少展示滑動內容的單元個數
  // maxItems: 2                 //一次最多展示滑動內容的單元個數
  // move: 1                     //一次滑動的單元個數
  // prevText: "Previous",       //String:  上一項的文字
  // nextText: "Next",           //String:  下一項的文字
  // pausePlay: false,           //Boolean: 是否顯示播放暫停按鈕
  // pauseText: 'Pause',         //String:  暫停文字
  // playText: 'Play',           //String: 播放文字
  randomize: false,              //Boolean: 是否隨機幻燈片
  slideToStart: 0,               //Integer:  初始化第一次顯示圖片位置
  animationLoop: true,           //是否迴圈滾動
  pauseOnAction: true,           //手動滾動內容後，是否暫停滾動
  pauseOnHover: true,            //滑鼠懸停內容上，是否暫停滾動
  // controlsContainer: "",      //Selector:  be taken.
  // manualControls: "",         //自定義控制導航
  // manualControlEvent:"",      //String:自定義導航控制觸發事件:預設是click,可以設定hover
  // start: function(){},        //載入第一頁觸發
  // before: function(){},       //每個滾動動畫開始時非同步觸發
  // after: function(){},        //每個滾動動畫結束時觸發
  // end: function(){}           //滾動到最後一頁時非同步觸發
});

補充
附上官方網站Flexslider