官方參數地址:https://www.slickjs.cn/
| 參數 | 類型 | 默認值 | 描述 |
| accessibility | 布爾值 | TRUE | 啟用Tab鍵和箭頭鍵導航 |
| adaptiveHeight | 布爾值 | FALSE | 為單滑塊水平輪播啟用自適應高度。 |
| autoplay | 布爾值 | FALSE | 啟用自動播放 |
| autoplaySpeed | 數值 | 3000 | 自動播放速度(以毫秒為單位) |
| arrows | 布爾值 | TRUE | 上一個/下一個箭頭 |
| asNavFor | 字符串 | null | 將滑塊設置為其他滑塊的導航(類或ID名稱) |
| appendArrows | 字符串 | $(element) | 更改導航箭頭的附加位置(選擇器,htmlString,數組,元素,jQuery對象) |
| appendDots | 字符串 | $(element) | 更改導航點的附加位置(選擇器,htmlString,數組,元素,jQuery對象) |
| prevArrow | 代碼段/element | <button class="slick-prev" aria-label="Previous" type="button">Previous</button> /$('.prev-next .prev') | 允許您選擇節點或為“上一個”箭頭自定義HTML |
| nextArrow | 代碼段/element | <button class="slick-next" aria-label="Next" type="button">Next</button> /$('.prev-next .next') | 允許您選擇節點或為“下一步”箭頭自定義HTML |
| centerMode | 布爾值 | FALSE | 通過部分上一張/下一張幻燈片啟用居中視圖。與奇數的slidesToShow計數一起使用。 |
| centerPadding | 字符串 | '50px' | 處于中心模式時的側面填充(像素或%) |
| cssEase | 字符串 | 'ease' | CSS3動畫緩動 |
| customPaging | function | n/a | 自定義分頁模板 |
| dots | 布爾值 | FALSE | 是否顯示圓點指示器 |
| dotsClass | 字符串 | 'slick-dots' | 滑動指示器點容器類 |
| draggable | 布爾值 | TRUE | 啟用鼠標拖動 |
| fade | 布爾值 | FALSE | 啟用淡入淡出 |
| focusOnSelect | 布爾值 | FALSE | 啟用對選定元素的關注(單擊) |
| easing | 字符串 | 'linear' | 為jQuery動畫添加緩動。與緩動庫或默認緩動方法一起使用 |
| edgeFriction | 數值 | 0.15 | 滑動非無限輪播邊緣時的阻力 |
| infinite | 布爾值 | TRUE | 無限循環滑動 |
| initialSlide | 數值 | 0 | 滑動即可開始 |
| lazyLoad | 字符串 | 'ondemand' | 設置延遲加載技術。接受“按需”或“漸進式” |
| mobileFirst | 布爾值 | FALSE | 響應式設置使用移動優先計算 |
| pauseOnFocus | 布爾值 | TRUE | 暫停焦點自動播放 |
| pauseOnHover | 布爾值 | TRUE | 懸停時暫停自動播放 |
| pauseOnDotsHover | 布爾值 | FALSE | 懸停點時暫停自動播放 |
| respondTo | 字符串 | 'window' | 響應對象響應的寬度。可以是“窗口”,“滑塊”或“最小”(兩者中較小的一個) |
| responsive | 對象 | none | 包含斷點和設置對象的對象(請參見演示)。在給定的屏幕寬度下啟用設置設置。將設置設置為“ unslick”而不是對象,以禁用給定斷點處的滑動。 |
| rows | 數值 | 1 | 將此設置為大于1將初始化網格模式。使用slidesPerRow設置每行應有多少張幻燈片。(輪播行數) |
| slide | element | '' | 元素查詢用作幻燈片 |
| slidesPerRow | 數值 | 1 | 通過“行”選項初始化網格模式后,可以設置每個網格行中有多少張幻燈片 |
| slidesToShow | 數值 | 1 | 要顯示的幻燈片數量 |
| slidesToScroll | 數值 | 1 | 要滾動的幻燈片數 |
| speed | 數值(ms) | 300 | 滑動/淡入淡出動畫速度 |
| swipe | 布爾值 | TRUE | 啟用swiping |
| swipeToSlide | 布爾值 | FALSE | 允許用戶直接拖動或滑動到幻燈片上,而與slidesToScroll無關 |
| touchMove | 布爾值 | TRUE | 輕觸即可滑動 |
| touchThreshold | 數值 | 5 | 要推進幻燈片,用戶必須滑動(1 / touchThreshold)*滑塊的寬度 |
| useCSS | 布爾值 | TRUE | 啟用/禁用CSS過渡 |
| useTransform | 布爾值 | TRUE | 啟用/禁用CSS轉換 |
| variableWidth | 布爾值 | FALSE | 可變寬度的幻燈片 |
| vertical | 布爾值 | FALSE | 垂直滑動模式 |
| verticalSwiping | 布爾值 | FALSE | 垂直滑動模式 |
| rtl | 布爾值 | FALSE | 更改滑塊的方向以從右到左 |
| waitForAnimate | 布爾值 | TRUE | 忽略動畫時前進幻燈片的請求 |
| zIndex | 數值 | 1000 | 設置幻燈片的zIndex值,對IE9和更低版本有用 |
基本使用
$('.box ul').slick({
autoplay: true, //是否自動播放
pauseOnHover: false, //鼠標懸停暫停自動播放
speed: 1500, //切換動畫速度
autoplaySpeed: 5000, //自動播放速度
slidesToShow: 1, //要顯示的動畫速度
swipeToSlide: true, //允許用戶直接拖動或滑動到幻燈片上
touchThreshold: 100, //更換幻燈片需滑動寬度(1 / touchThreshold)
centerMode: true, //啟動居中
centerPadding: '0', //處于中心模式時的側面填充(像素或%)
arrows: false, //是否開啟左右切換
draggable: true, //是否啟用鼠標拖動
rows: 2, //顯示幾行,默認為 1
vertical: false, //是否開啟垂直滑動模式
verticalSwiping: false, //是否開啟垂直滑動切換
});
