slick.js是一个轻量级、快速、响应式的 jQuery 幻灯片和旋转木马插件，适用于移动设备和桌面端。本文介绍如何使用slick.js制作一个简单的幻灯片效果。
主要js与解析
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="slick/slick.js" type="text/javascript"></script>
<script>
$('.fade').slick({
dots: true, //显示圆点指示器
infinite: true, //无限循环滑动
speed: 500, //滑动/淡入淡出动画速度
fade: true, //启用淡入淡出
slide: 'div', //元素查询用作幻灯片
autoplay: true, //启用自动播放
cssEase: 'linear' //CSS3动画缓动
});
</script>更多参数说明
accessibility 布尔值 TRUE //启用Tab键和箭头键导航
adaptiveHeight 布尔值 FALSE //为单滑块水平轮播启用自适应高度。
autoplay 布尔值 FALSE //启用自动播放
autoplaySpeed 数值 3000 //自动播放速度（以毫秒为单位）
arrows 布尔值 TRUE //上一个/下一个箭头
asNavFor 字符串 null //将滑块设置为其他滑块的导航（类或ID名称）
appendArrows 字符串 $(element) //更改导航箭头的附加位置（选择器，htmlString，数组，元素，jQuery对象）
appendDots 字符串 $(element) //更改导航点的附加位置（选择器，htmlString，数组，元素，jQuery对象）
prevArrow 代码段/element /$('.prev-next .prev') //允许您选择节点或为“上一个”箭头自定义HTML
nextArrow 代码段/element /$('.prev-next .next') //允许您选择节点或为“下一步”箭头自定义HTML。
centerMode 布尔值 FALSE //通过部分上一张/下一张幻灯片启用居中视图。与奇数的slidesToShow计数一起使用。
centerPadding 字符串 '50px' //处于中心模式时的侧面填充（像素或％）
cssEase 字符串 'ease' //CSS3动画缓动
customPaging function n/a //自定义分页模板
dots 布尔值 FALSE //显示圆点指示器
dotsClass 字符串 'slick-dots' //滑动指示器点容器类
draggable 布尔值 TRUE //启用鼠标拖动
fade 布尔值 FALSE //启用淡入淡出
focusOnSelect 布尔值 FALSE //启用对选定元素的关注（单击）
easing 字符串 'linear' //为jQuery动画添加缓动。与缓动库或默认缓动方法一起使用
edgeFriction 数值 0.15 //滑动非无限轮播边缘时的阻力
infinite 布尔值 TRUE //无限循环滑动
initialSlide 数值 0 //滑动即可开始
lazyLoad 字符串 'ondemand' //设置延迟加载技术。接受“按需”或“渐进式”
mobileFirst 布尔值 FALSE //响应式设置使用移动优先计算
pauseOnFocus 布尔值 TRUE //暂停焦点自动播放
pauseOnHover 布尔值 TRUE //悬停时暂停自动播放
pauseOnDotsHover 布尔值 FALSE //悬停点时暂停自动播放
respondTo 字符串 'window' //响应对象响应的宽度。可以是“窗口”，“滑块”或“最小”（两者中较小的一个）
responsive 对象 none //包含断点和设置对象的对象（请参见演示）。在给定的屏幕宽度下启用设置设置。将设置设置为“ unslick”而不是对象，以禁用给定断点处的滑动。
rows 数值 1 //将此设置为大于1将初始化网格模式。使用slidesPerRow设置每行应有多少张幻灯片。(轮播行数)
slide element '' //元素查询用作幻灯片
slidesPerRow 数值 1 //通过“行”选项初始化网格模式后，可以设置每个网格行中有多少张幻灯片
slidesToShow 数值 1 //要显示的幻灯片数量
slidesToScroll 数值 1 //要滚动的幻灯片数
speed 数值(ms) 300 //滑动/淡入淡出动画速度
swipe 布尔值 TRUE //启用swiping
swipeToSlide 布尔值 FALSE //允许用户直接拖动或滑动到幻灯片上，而与slidesToScroll无关
touchMove 布尔值 TRUE //轻触即可滑动
touchThreshold 数值 5 //要推进幻灯片，用户必须滑动（1 / touchThreshold）*滑块的宽度
useCSS 布尔值 TRUE //启用/禁用CSS过渡
useTransform 布尔值 TRUE //启用/禁用CSS转换
variableWidth 布尔值 FALSE //可变宽度的幻灯片
vertical 布尔值 FALSE //垂直滑动模式
verticalSwiping 布尔值 FALSE //垂直滑动模式
rtl 布尔值 FALSE //更改滑块的方向以从右到左
waitForAnimate 布尔值 TRUE //忽略动画时前进幻灯片的请求
zIndex 数值 1000 //设置幻灯片的zIndex值，对IE9和更低版本有用
