2021-5-17 前端達人
<link rel="stylesheet" href="style/slick.css">
<script src="script/jquery.min.js"></script>
<script src="script/slick.min.js"></script>
<div class="slick">
<div><a ><img src="images/1.jpg" alt=""></a></div>
<div><a ><img src="images/2.jpg" alt=""></a></div>
<div><a ><img src="images/4.jpg" alt=""></a></div>
<div><a ><img src="images/3.jpg" alt=""></a></div>
<div><a ><img src="images/5.jpg" alt=""></a></div>
</div>
$(function(){
$('.slick').slick({
dots: true
});
});
| 參數(shù) | 類型 | 默認值 | 說明 |
|---|---|---|---|
| accessibility | 布爾值 | true | 啟用Tab鍵和箭頭鍵導(dǎo)航 |
| autoplay | 布爾值 | false | 自動播放 |
| autoplaySpeed | 整數(shù) | 3000 | 自動播放間隔 |
| centerMode | 布爾值 | false | 中心模式 |
| centerPadding | 字符串 | ’50px’ | 中心模式左右內(nèi)邊距 |
| cssEase | 字符串 | ‘ease’ | CSS3 動畫 |
| customPaging | function | n/a | 自定義分頁 |
| dots | 布爾值 | false | 指示點 |
| draggable | 布爾值 | true | 啟用桌面拖動 |
| easing | 字符串 | ‘linear’ | animate() fallback easing |
| fade | 布爾值 | false | 淡入淡出 |
| arrows | 布爾值 | true | 左右箭頭 |
| infinite | 布爾值 | true | 循環(huán)播放 |
| lazyLoad | 字符串 | ‘ondemand’ | 延遲加載，可選 ondemand 和 progressive |
| onBeforeChange(this, index) | method | null | 開始切換前的回調(diào)函數(shù) |
| onAfterChange(this, index) | method | null | 切換后的回調(diào)函數(shù) |
| onInit(this) | method | null | 第一次初始化后的回調(diào)函數(shù) |
| onReInit(this) | method | null | 再次初始化后的回調(diào)函數(shù) |
| pauseOnHover | 布爾值 | true | 鼠標(biāo)懸停暫停自動播放 |
| responsive | object | null | 斷點觸發(fā)設(shè)置 |
| slide | 字符串 | ‘div’ | 滑動元素查詢 |
| slidesToShow | 整數(shù) | 1 | 幻燈片每屏顯示個數(shù) |
| slidesToScroll | 整數(shù) | 1 | 幻燈片每次滑動個數(shù) |
| speed | 整數(shù) | 300 | 滑動時間 |
| swipe | 布爾值 | true | 移動設(shè)備滑動事件 |
| touchMove | 布爾值 | true | 觸摸滑動 |
| touchThreshold | 整數(shù) | 5 | 滑動切換閾值，即滑動多少像素后切換 |
| useCSS | 布爾值 | true | 使用 CSS3 過度 |
| vertical | 布爾值 | false | 垂直方向 |
| 方法 | Argument | 說明 |
|---|---|---|
| slick() | options : object | 初始化 slick |
| unslick() | 銷毀 slick | |
| slickNext() | 切換下一張 | |
| slickPrev() | 切換上一張 | |
| slickPause() | 暫停自動播放 | |
| slickPlay() | 開始自動播放 | |
| slickGoTo() | index : int | 切換到第 x 張 |
| slickCurrentSlide() | 返回當(dāng)前幻燈片索引 | |
| slickAdd() | element : html or DOM object, index: int, addBefore: bool | Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String |
| slideRemove() | index: int, removeBefore: bool | Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set. |
| slickFilter() | filter : selector or function | Filters slides using jQuery .filter syntax |
| slickUnfilter() | Removes applied filter | |
| slickSetOption(option,value,refresh) | option : string(option name), value : depends on option, refresh : 布爾值 | Sets an option live. Set refresh to true if it is an option that changes the display |
GitHub：https://github.com/kenwheeler/slick
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：csdn 作者：cc蒲公英
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.yvirxh.cn