关于slick
在现代的网页设计中，制作一个轮播图或者旋转木马是非常有必要的，让用户可以通过轮播的方式查看。 为了在手机端实现轮播图功能，我们可以使用 jQuery 插件，slick 是一个完全响应式的 jQuery 幻灯片插件，适用于移动设备和桌面端，slick可以单独设置断点。
如何使用slick
步骤1：引入必要的文件
引入 slick.css，jquery.js和slick.js
<link rel="stylesheet" href="css/slick.css" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/slick.js"></script>
步骤2：使用HTML初始化
<div class="slider">
<div>
<img src="image1.jpg" alt="Image 1"></div>
<div>
<img src="image2.jpg" alt="Image 2"></div>
<div>
<img src="image3.jpg" alt="Image 3"></div>
</div>步骤3：调用slick。
<script>
$(document).ready(function () {
$('.slider').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
arrows: false
});
});
</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和更低版本有用
