jQuery幻灯片插件slick

简介

slick 是一个基于 jQuery 的幻灯片插件，具有以下特点：
1.支持响应式
2.浏览器支持 CSS3 时，则使用 CSS3 过度/动画
3.支持移动设备滑动
4.支持桌面浏览器鼠标拖动
5.支持循环
6.支持左右控制
7.支持动态添加、删除、过滤
8.支持自动播放、圆点、箭头、回调等等

兼容

浏览器兼容:兼容IE7+以上
jQuery兼容:兼容IE7及以上版本

使用方法

1.引入文件

2、HTML

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