简介
slick 是一个基于 jQuery 的幻灯片插件，具有以下特点：
1.支持响应式
2.浏览器支持 CSS3 时，则使用 CSS3 过度/动画
3.支持移动设备滑动
4.支持桌面浏览器鼠标拖动
5.支持循环
6.支持左右控制
7.支持动态添加、删除、过滤
8.支持自动播放、圆点、箭头、回调等等
兼容
浏览器兼容:兼容IE7+以上
jQuery兼容:兼容IE7及以上版本
使用方法
1.引入文件
<link rel="stylesheet" href="style/slick.css">
<script src="script/jquery.min.js"></script>
<script src="script/slick.min.js"></script>
2、HTML
<div class="slick">
<div><a href="http://www.dowebok.com"><img src="images/1.jpg" alt=""></a></div>
<div><a href="http://www.dowebok.com"><img src="images/2.jpg" alt=""></a></div>
<div><a href="http://www.dowebok.com"><img src="images/3.jpg" alt=""></a></div>
<div><a href="http://www.dowebok.com"><img src="images/4.jpg" alt=""></a></div>
<div><a href="http://www.dowebok.com"><img src="images/5.jpg" alt=""></a></div>
</div>
3.JavaScript
$(function(){
$('.slick').slick({
dots: true
});
});
参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| accessibility | 布尔值 | true | 启用Tab键和箭头键导航 |
| autoplay | 布尔值 | false | 自动播放 |
| autoplaySpeed | 整数 | 3000 | 自动播放间隔 |
| centerMode | 布尔值 | false | 中心模式 |
| centerPadding | 字符串 | ’50px’ | 中心模式左右内边距 |
| cssEase | 字符串 | ‘ease’ | CSS3 动画 |
| customPaging | function | n/a自定义分页 | |
| dots | 布尔值 | false | 指示点 |
| draggable | 布尔值 | true | 启用桌面拖动 |
| easing | 字符串 | ‘linear’ | animate() fallback easing |
| fade | 布尔值 | false | 淡入淡出 |
| arrows | 布尔值 | true | 左右箭头 |
| infinite | 布尔值 | true | 循环播放 |
| lazyLoad | 字符串 | ‘ondemand’ | 延迟加载，可选 ondemand 和 progressive |
| onBeforeChange(this, index) | method | null | 开始切换前的回调函数 |
| onAfterChange(this, index) | method | null | 切换后的回调函数 |
| onInit(this) | method | null | 第一次初始化后的回调函数 |
| onReInit(this) | method | null | 再次初始化后的回调函数 |
| pauseOnHover | 布尔值 | true | 鼠标悬停暂停自动播放 |
| responsive | object | null | 断点触发设置 |
| slide | 字符串 | ‘div’ | 滑动元素查询 |
| slidesToShow | 整数 | 1 | 幻灯片每屏显示个数 |
| slidesToScroll | 整数 | 1 | 幻灯片每次滑动个数 |
| speed | 整数 | 300 | 滑动时间 |
| swipe | 布尔值 | true | 移动设备滑动事件 |
| touchMove | 布尔值 | true | 触摸滑动 |
| touchThreshold | 整数 | 5 | 滑动切换阈值，即滑动多少像素后切换 |
| useCSS | 布尔值 | true | 使用 CSS3 过度 |
| vertical | 布尔值 | false | 垂直方向 |
方法
| 方法 | Argument | 说明 |
|---|---|---|
| slick() | options : object | 初始化 slick |
| unslick() | 销毁 slick | |
| slickNext() | 切换下一张 | |
| slickPrev() | 切换上一张 | |
| slickPause() | 暂停自动播放 | |
| slickPlay() | 开始自动播放 | |
| slickGoTo() | index : int | 切换到第 x 张 |
| slickCurrentSlide() | 返回当前幻灯片索引 | |
| slickAdd() | element : html or DOM object, index: int, addBefore: bool | 添加一个幻灯片。如果提供了索引，则在该索引处添加，如果设置了addBefore，则在索引前添加。如果没有提供索引，则在末尾添加，如果设置了addBefore，则在开头添加。接受HTML字符串 |
| slideRemove() | index: int, removeBefore: bool | 按索引删除幻灯片。如果removeBefore设置为true，则删除前面的幻灯片索引，如果没有指定索引，则删除第一个幻灯片。如果removeBefore设置为false，则删除后面的幻灯片索引，如果没有设置索引，则删除最后一张幻灯片. |
| slickFilter() | filter : selector or function | 过滤器幻灯片使用jQuery .filter语法 |
| slickUnfilter() | 删除应用过滤器 | |
| slickSetOption(option,value,refresh) | option : string(option name), value : depends on option, refresh : 布尔值 | 设置一个活的选项。如果是更改显示的选项，则将refresh设置为true |
