16、jQuery插件之Slick幻灯片插件
简介
slick 是一个基于 jQuery 的幻灯片插件，具有以下特点：
支持响应式
浏览器支持 CSS3 时，则使用 CSS3 过度/动画
支持移动设备滑动
支持桌面浏览器鼠标拖动
支持循环
支持左右控制
支持动态添加、删除、过滤
支持自动播放、圆点、箭头、回调等等
兼容
接下来，我们开始写案例：
2、多张幻灯片
代码:
3、响应式显示
4、一次一张
6、中心大屏模式
7、懒惰加载
8、自动播放
9、淡入淡出
11、过滤效果
slick 是一个基于 jQuery 的幻灯片插件，具有以下特点：
支持响应式
浏览器支持 CSS3 时，则使用 CSS3 过度/动画
支持移动设备滑动
支持桌面浏览器鼠标拖动
支持循环
支持左右控制
支持动态添加、删除、过滤
支持自动播放、圆点、箭头、回调等等
兼容
浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。
jQuery兼容：兼容 1.7 及以上版本。
参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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 | 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 |
接下来，我们开始写案例：
1、一张幻灯片，手动点击效果
代码:
Slick插件案例
$('.single-item').slick({
dots: true,//显示指示点
infinite: true,//开启循环播放
speed: 300,//滑动速度300毫秒，单位毫秒
slidesToShow: 1,//幻灯片每屏显示1个
slidesToScroll: 1//幻灯片每次滑动1个
});2、多张幻灯片
代码:
Slick插件案例
多张幻灯片
$('.multiple-items').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3
});3、响应式显示
PC端显示
手机端显示
代码:
Slick插件案例
响应式显示
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});4、一次一张
代码:
Slick插件案例
一次一张
$('.one-time').slick({
dots: true,
infinite: false,
placeholders: false,
speed: 300,
slidesToShow: 5,
touchMove: false,
slidesToScroll: 1
});5、参差不齐的设置
Slick插件案例
参差不齐的设置
$('.uneven').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4
});6、中心大屏模式
Slick插件案例
中心大屏模式
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});7、懒惰加载
代码:
Slick插件案例
懒惰加载
![]()
![]()
![]()
![]()
![]()
![]()
$('.lazy').slick({
lazyLoad: 'ondemand',//延迟加载,可选 ondemand 和 progressive(测了下，没有延迟效果)
slidesToShow: 3,
slidesToScroll: 1
});8、自动播放
代码：
Slick插件案例
自动播放
$('.autoplay').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,//开启自动播放
autoplaySpeed: 2000//自动播放间隔，每2秒播一次
});9、淡入淡出
Slick插件案例
淡入淡出
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,//开启淡入淡出效果
slide: 'div',//滑动元素查询
cssEase: 'linear'//CSS3 动画名字
});
Slick插件案例
动态添加和移除幻灯片
$('.add-remove').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 3
});
var slideIndex = 1;
$('.js-add-slide').on('click', function() {
slideIndex++;
$('.add-remove').slickAdd('' + slideIndex + '
');
});
$('.js-remove-slide').on('click', function() {
$('.add-remove').slickRemove(slideIndex - 1);
if (slideIndex !== 0){
slideIndex--;
}
});11、过滤效果
Slick插件案例
过滤效果
$('.filtering').slick({
dots: true,
slidesToShow: 4,
slidesToScroll: 4
});
var filtered = false;
$('.js-filter').on('click', function() {
if (filtered === false) {
$('.filtering').slickFilter(':even');
$(this).text('没过滤幻灯片');
filtered = true;
} else {
$('.filtering').slickUnfilter();
$(this).text('过滤幻灯片');
filtered = false;
}
});
下载：http://git.oschina.net/sensus/slickChaJianAnLi/tree/master