轮播插件Slick.js使用方法详解

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,  //显示几行，默认为 1
　　　　　vertical: 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>
 　　<li class="line">2001</li>
　　<li class="line">1998</li>
    </ul>
     <div class="small"></div>
 </div>

<div class="box">
    <ol>
       <li>
        <div class="grid">
        <div class="left">
        　　<span>1998 year</span>
        　　<h4>第一个幻灯片</h4>
　　　　　<div class="con">
　　　　　　1998 ind
　　　　　</div>
　　　　　<div class="more">
　　　　　　　<a class="prev">previous</a>
　　　　　　　<a class="next">next 2000</a>
　　　　　</div>
　　　　　</div>
　　　　　<div class="right">
　　　　　<div class="img-box">
　　　　　　　<img src="1.img">
　　　　　</div>
　　　　　</div>
　　　　　</div>
　　　　</li>
<li>
<div class="grid">
        <div class="left">
        　　<span>2001 year</span>
        　　<h4>第一个幻灯片</h4>
　　　　　<div class="con">
　　　　　　this is 2001
　　　　　</div>
　　　　　<div class="more">
　　　　　　　<a class="prev">previous</a>
　　　　　　　<a class="next">next 2000</a>
　　　　　</div>
　　　　　</div>
　　　　　<div class="right">
　　　　　<div class="img-box">
　　　　　　　<img src="1.img">
　　　　　</div>
　　　　　</div>
　　　　　</div>
</li>
<li>
<div class="grid">
        <div class="left">
        　　<span>2003 year</span>
        　　<h4>第一个幻灯片</h4>
　　　　　<div class="con">
　　　　　　this is 2003
　　　　　</div>
　　　　　<div class="more">
　　　　　　　<a class="prev">previous</a>
　　　　　　　<a class="next">next 2000</a>
　　　　　</div>
　　　　　</div>
　　　　　<div class="right">
　　　　　<div class="img-box">
　　　　　　　<img src="1.img">
　　　　　</div>
　　　　　</div>
　　　　　</div>
</li>

　　</ol>
</div>       

<!-- JS: -->

<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);
});
</script>

效果图：

 

 

方法	对象	说明
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');
    });