Slick/Slick.js使用方法（个人总结）/Slick.js介绍
相比于Swiper而选择使用Slick.js的原因主要是因为其兼容不错并且在手机端的滑动效果更顺畅
官方参数介绍：官方地址
| 参数 | 类型 | 默认值 | 描述 |
| accessibility | 布尔值 | TRUE | 启用Tab键和箭头键导航 |
| adaptiveHeight | 布尔值 | FALSE | 为单滑块水平轮播启用自适应高度。 |
| autoplay | 布尔值 | FALSE | 启用自动播放 |
| autoplaySpeed | 数值 | 3000 | 自动播放速度（以毫秒为单位） |
| arrows | 布尔值 | TRUE | 上一个/下一个箭头 |
| asNavFor | 字符串 | null | 将滑块设置为其他滑块的导航（类或ID名称） |
| appendArrows | 字符串 | $(element) | 更改导航箭头的附加位置（选择器，htmlString，数组，元素，jQuery对象） |
| appendDots | 字符串 | $(element) | 更改导航点的附加位置（选择器，htmlString，数组，元素，jQuery对象） |
| prevArrow | 代码段/element |
<button class="slick-prev" aria-label="Previous" type="button">Previous</button> /$('.prev-next .prev') |
允许您选择节点或为“上一个”箭头自定义HTML |
| nextArrow | 代码段/element |
<button class="slick-next" aria-label="Next" type="button">Next</button> /$('.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和更低版本有用 |
基本使用：，一般使用只需前十个属性
$( '.box ul' ).slick({autoplay: true , //是否自动播放pauseOnHover: false , //鼠标悬停暂停自动播放speed: 1500, //切换动画速度autoplaySpeed: 5000, //自动播放速度slidesToShow: 1, //要显示的动画速度swipeToSlide: true , //允许用户直接拖动或滑动到幻灯片上touchThreshold: 100, //更换幻灯片需滑动宽度（1 / touchThreshold）centerMode: true , //启动居中centerPadding: '0' , //处于中心模式时的侧面填充（像素或％）arrows: false , //是否开启左右切换draggable: true , //是否启用鼠标拖动rows: 2, //显示几行，默认为 1vertical: false ， //是否开启垂直滑动模式verticalSwiping: false , //是否开启垂直滑动切换});
轮播效果：
fade： true // 开启渐隐切换模式
// 进阶，添加缓动
cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)' // 自定义缓动
cssEase: 'linear' , // 缓动库缓动// 不间断轮播演示，即利用缓动库实现轮播没有停顿
$( '#index-body .gallery .gallery-box ul' ).slick({autoplay: true ,pauseOnHover: true ,speed: 4000,autoplaySpeed: 0,slidesToShow: 3,touchThreshold: 100,cssEase: 'linear' ,
});
方法使用示例Function：
| 方法 | 对象 | 说明 |
| beforeChange | slick, currentSlide, nextSlide | 更换幻灯片前触发（当前对象，当前索引，下一个索引） |
将两个序列关联起来：（.list ul li是列表，.box ol 是幻灯片）
$( '.box ol' ).on( 'beforeChange' , function(event, slick, currentSlide, nextSlide){$( ".list ul li" ).eq(nextSlide).addClass( 'active' ).siblings().removeClass( 'active' );});
});
或者将两个幻灯片关联起来:
< div class="list">< ul class="time">< li class="line">2003< li class="line">2001< li class="line">1998< div class="small">< div class="box">< ol >< li >< div class="grid">< div class="left">< span >1998 year< h4 >第一个幻灯片< div class="con">1998 ind< div class="more">< a class="prev">previous< a class="next">next 2000< div class="right">< div class="img-box">< img src="1.img">< li >
< div class="grid">< div class="left">< span >2001 year< h4 >第一个幻灯片< div class="con">this is 2001< div class="more">< a class="prev">previous< a class="next">next 2000< div class="right">< div class="img-box">< img src="1.img">< li >
< div class="grid">< div class="left">< span >2003 year< h4 >第一个幻灯片< div class="con">this is 2003< div class="more">< a class="prev">previous< a class="next">next 2000< div class="right">< div class="img-box">< img src="1.img"> < script >
$('.box ol').slick({
// autoplay: true,
pauseOnHover: false,
speed: 1500,
autoplaySpeed: 5000,
slidesToShow: 1,
swipeToSlide: true,
touchThreshold: 100,
centerMode: true,
centerPadding: '0',
prevArrow: $('.box .left .more a.prev'),
nextArrow: $('.box .left .more a.next'),
});$('.list .time').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var i = (nextSlide ? nextSlide : 0) + 1;
$(".list .small").text(i + '/' + slick.slideCount);
$('.box ol').slick('slickGoTo', nextSlide);
});
效果图：
| 方法 | 对象 | 说明 |
| slickGoTo | int : slide number | 按索引导航到幻灯片 |
点击列表元素获得对应Index给幻灯片，使切换到对应的幻灯片（.list ul li是列表，.box ol 是幻灯片）
$( ".list ul li" ).click( function () {$( '.box ol' ).slick( 'slickGoTo' , $( this ).index());$( this ).addClass( 'active' ).siblings().removeClass( 'active' );});
