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');
});