slick 是一个基于 jQuery 的响应触摸式幻灯片插件，支持IE8+，Chrome, Firefox, and Safari，具有以下特点：
支持响应式
浏览器支持 CSS3 时，则使用 CSS3 过度/动画
支持移动设备滑动
支持桌面浏览器鼠标拖动
支持循环
支持左右控制
支持动态添加、删除、过滤
支持自动播放、圆点、箭头、回调等等
兼容
浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。
jQuery兼容：兼容 1.7 及以上版本。
使用方法
1、引入文件
<link rel="stylesheet" href="style/slick.css">
<script src="script/jquery.min.js"></script>
<script src="script/slick.min.js"></script>
注意：需jQuery 1.7 +
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/4.jpg" alt=""></a></div>
<div><a href="http://www.dowebok.com"><img src="images/3.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 动画
customPagingfunctionn/a自定义分页
dots布尔值false指示点
draggable布尔值true启用桌面拖动
easing字符串‘linear’animate() fallback easing
fade布尔值false淡入淡出
arrows布尔值true左右箭头
infinite布尔值true循环播放
lazyLoad字符串‘ondemand’延迟加载，可选 ondemand 和 progressive
onBeforeChange(this, index)methodnull开始切换前的回调函数
onAfterChange(this, index)methodnull切换后的回调函数
onInit(this)methodnull第一次初始化后的回调函数
onReInit(this)methodnull再次初始化后的回调函数
pauseOnHover布尔值true鼠标悬停暂停自动播放
responsiveobjectnull断点触发设置
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: boolAdd 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: boolRemove 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 functionFilters 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
首先在写页面的时候就要为响应式网页做准备，宽使用百分百，不设置固定高度。设置meta 进行适应移动端页面。
了解pc 端主流显示器分辨率，设置显示断点，例如1920 * 1080 通过媒体查询设置 1920 宽度的显示方式，1600*1200，设置 1600宽度的显示方式，其实一般是1200 以上的都设置同一个显示方式就可以了，主要是显示器分辨率低的，例如 800 * 600 设置它的显示方式，
xs: 576px sn:≥576px md: ≥768pxlg:≥992px xl:≥1200px xxl:≥1600px
一般需要通过媒体查询设置的pc端的范围有这些。
移动端的话一般不是通过媒体查询来设置， 先用 js 将单位设置为 rem, 即 1rem = 100px
这样则 默认字体为 0.16rem 通过百分百宽度来设置盒子的宽，让它根据屏幕来做调整。
如果使用框架的话还可以结合 栅格系统来做响应式兼容。
其实移动端的兼容是最麻烦的，因为手机品牌种类多，系统一般分 安卓 和 ios ,但是还有系统版本，问题，不同系统版本也会有不一样的显示方式（特别是ios系统）。
安卓主要是品牌种类的不同，屏幕 分辨率的不同。
想要做基本的兼容就是先设置meta，然后将宽设置为 百分百比
15响应式网页设计是需要js的支撑了。首先你要熟练使用js,才能学会作出响应式的网页。如果不会的话，建议你先去使用响应式的网站模板，先去下载几个响应式网页模板，根据这个模板查看他的源码。慢慢的自己就可以设计出这个响应式网页模板。像这类模板下载的网站有很多。比如开创着素材、单张素材。
