slick笔记
网址
1.中文网 浏览器的兼容性
目前实测过主流浏览器及ie8以上浏览器均可兼容。
优点
1、结构简单【slick笔记】 2、兼容ie8+，能够满足我们大部分项目的使用 弊端
1、回调使用独立出来，书写就会显得有些复杂 使用教程
https://www.jqhtml.com/6922.html 参数
基本使用参数
参数及默认值
说明
类型
infinite: true,
循环功能
布尔值
autoplay: false,
自动播放
布尔值
arrows: true,
左右箭头
布尔值
draggable: true,
拖拽功能，启用鼠标拖动
布尔值
dots: false,
指示点
布尔值
fade:false,
开启渐隐切换模式
布尔值
centerMode:false,
中心模式
布尔值
slidesToShow: 1,
可见数,幻灯片每屏显示个数
整数
slidesToScroll: 1,
滚动个数,幻灯片每次滑动个数
整数
autoplaySpeed: 3000,
自动播放速度
整数
speed: 300,
切换动画速度
整数
appendArrows:$(element),
添加按钮元素,更改导航箭头的附加位置
字符串
appendDots:$(element),
添加切换点元素,更改导航点的附加位置
字符串
centerPadding:'50px',
中心模式左右内边距
字符串
asNavFor:null,
联动,将滑块设置为其他滑块的导航（类或ID名称）
字符串
其他参数
参数及默认值
说明
类型
accessibility:true,
启用Tab键和箭头键导航
布尔值
pauseOnFocus:true,
暂停焦点自动播放
布尔值
pauseOnHover:true,
鼠标悬停暂停自动播放
布尔值
pauseOnDotsHover:false,
悬停点时暂停自动播放
布尔值
swipeToSlide:false,
允许用户直接拖动或滑动到幻灯片上，
布尔值
useTransform:false,
启用/禁用CSS转换
布尔值
variableWidth:false,
可变宽度的幻灯片
布尔值
verticalSwiping:false,
垂直滑动模式
布尔值
vertical:false,
纵向滚动参数
布尔值
rtl:false,
更改滑块的方向以从右到左
布尔值
waitForAnimate:true,
忽略动画时前进幻灯片的请求
布尔值
mobileFirst:false,
响应式设置使用移动优先计算
布尔值
focusOnSelect:false,
启用对选定元素的（单击切换）
布尔值
adaptiveHeight:false,
为单滑块水平轮播启用自适应高度。
布尔值
useCSS:true,
使用 CSS3 过度
布尔值
touchMove:true,
触摸滑动
布尔值
swipe:true,
移动设备滑动事件
布尔值
touchThreshold:5,
滑动切换阈值，即滑动多少像素后切换
整数
zIndex:1000,
设置幻灯片的zIndex值，对IE9和更低版本有用
数值
slidesPerRow:1,
通过“行”选项初始化网格模式后，
数值
rows:1,
将此设置为大于1将初始化网格模式。
数值
initialSlide:0,
滑动即可开始
数值
edgeFriction:0.15,
滑动非无限轮播边缘时的阻力
数值
cssEase:‘ease’,
CSS3 动画
字符串
easing:‘linear’,
animate() fallback easing
字符串
lazyLoad:‘ondemand’,
延迟加载，可选 ondemand 和 progressive
字符串
dotsClass:'slick-dots',
滑动指示器点容器类
字符串
slide:‘div’,
滑动元素查询
字符串
respondTo:'window',
响应对象响应的宽度。
字符串
prevArrow:$(element),
允许您选择节点或为“上一个”箭头自定义HTML
代码段/element
nextArrow:$(element),
允许您选择节点或为“下一步”箭头自定义HTML。
代码段/element
customPaging
自定义分页,默认n/a
function
responsive
断点触发设置,默认null
object
onBeforeChange(this, index)
开始切换前的回调函数,默认null
method
onAfterChange(this, index)
切换后的回调函数,默认null
method
onInit(this)
第一次初始化后的回调函数,默认null
method
onReInit(this)
再次初始化后的回调函数,默认null
method
回调
回调方法是独立的，建议都写到你所调用的slick之上
需掌握回调
方法
对象
说明
init
event, slick
初始化（当前对象，对象，）
beforeChange
event, slick, currentSlide, nextSlide
更换幻灯片前触发（当前对象，对象，当前索引，下一个索引）
afterChange
event, slick, currentSlide
更换幻灯片前触发（当前对象，对象，当前索引，）
destroy
event, slick
摧毁（当前对象，对象，）
初始化
// 初始化
$(".Slick .bd").on("init", function(event, slick) {});
// 初始化
$(".Slick .bd").on("init", function(event, slick) {
var title = $(".Slick .slick-current").find(".text .title").html();
$(".prodC1ConL .prodC1ConLCon .title").html(title);
});
// 初始化
$(".Slick .bd").on("init", function(event, slick) {
var title=slick.$slides.eq(slick.currentSlide).find(".slickCon").data("title");
$(".focusSlickText .title").html(title);
});
更换幻灯片前触发
// 更换幻灯片前触发
$(".Slick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){});
// 更换幻灯片前触发
$(".Slick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){
var title = $(".Slick .myslide").eq(nextSlide).find(".text .title").html();
$(".prodC1ConL .prodC1ConLCon .title").html(title);
});
// 更换幻灯片前触发
$(".Slick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){
var title=slick.$slides.eq(nextSlide).find(".slickCon").data("title");
$(".focusSlickText .title").html(title);
});
更换幻灯片后触发
//更换幻灯片后触发
$(".Slick .bd").on("afterChange", function(event, slick, currentSlide){});
方法
方法
Argument
说明
slick()
options : object
初始化 slick
unslick()
销毁 slick
slickNext()
切换下一张
slickPrev()
切换上一张
slickPause()
暂停自动播放
slickPlay()
开始自动播放
slickGoTo()
index : int
切换到第 x 张
slickCurrentSlide()
返回当前幻灯片索引
slickAdd()
element : html or DOM object, index: int, addBefore: bool
Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String
slideRemove()
index: int, removeBefore: bool
Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter()
filter : selector or function
Filters slides using jQuery .filter syntax
slickUnfilter()
Removes applied filter
slickSetOption(option,value,refresh)
option : string(option name), value : depends on option, refresh : 布尔值
Sets an option live. Set refresh to true if it is an option that changes the display
方法使用案例
切换下一张
一般使用
引入文件
html结构
js调用
css样式
.Slick .prev,
.Slick .next{display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
cursor: pointer;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
margin: auto 0;
}
.Slick .prev {left: 0;
}
.Slick .next {right: 0;
}
.Slick .prev::before,
.Slick .next::before{display: block;
content: '';
color: #FFFFFF;
width: 10px;
height: 10px;
position: absolute;
top: 20px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.Slick .prev::before{left: 20px;
border-left: solid 1px currentColor;
border-top: solid 1px currentColor;
}
.Slick .next::before{left: 18px;
border-bottom: solid 1px currentColor;
border-right: solid 1px currentColor;
}
.Slick .slick-dots {position: absolute;
bottom: 15px;
left: 0;
width: 100%;
text-align: center;
font-size: 0;
}
.Slick .slick-dots li {border: 1px solid #FFFFFF;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 10px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
position: relative;
}
.Slick .slick-dots li.slick-active {border: 1px solid #FFFFFF;
background: #FFFFFF;
}
.Slick {position: relative;
overflow: hidden;
}
.Slick .bd {overflow: hidden;
}
.Slick .slick-list {overflow: visible;
}
.Slick .myslide {float: left;
display: inline;
}
.Slick .slickCon {display: block;
}
html代码块
"focusSlick": {
"body": [
"",
".focusSlick .prev,",
".focusSlick .next{display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
cursor: pointer;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
margin: auto 0;
}",
".focusSlick .prev {left: 0;
}",
".focusSlick .next {right: 0;
}",
".focusSlick .prev::before,",
".focusSlick .next::before{display: block;
content: '';
color: #FFFFFF;
width: 10px;
height: 10px;
position: absolute;
top: 20px;
transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}",
".focusSlick .prev::before{left: 20px;
border-left: solid 1px currentColor;
border-top: solid 1px currentColor;
}",
".focusSlick .next::before{left: 18px;
border-bottom: solid 1px currentColor;
border-right: solid 1px currentColor;
}",
".focusSlickDots{float: right;
width: 100px;
}",
".focusSlickDots .slick-dots {height: 60px;
text-align: center;
font-size: 0;
line-height: 60px;
overflow: hidden;
}",
".focusSlickDots .slick-dots li {border: 1px solid #FFFFFF;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 100%;
margin: 0 4px;
vertical-align: middle;
cursor: pointer;
}",
".focusSlickDots .slick-dots li.slick-active {background: #FFFFFF;
}",
".focusSlickBtn{width: 100%;
background: rgba(0,0,0,0.6);
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
z-index: 5;
}",
".focusSlickText{overflow: hidden;
padding-left: 20px;
}",
".focusSlickText .title{font-size: 16px;
color: #FFFFFF;
height: 60px;
line-height: 60px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}",
".focusSlick {position: relative;
overflow: hidden;
}",
".focusSlick .bd {overflow: hidden;
}",
".focusSlick .slick-list {overflow: visible;
}",
".focusSlick .myslide {float: left;
display: inline;
}",
".focusSlick .slickCon {display: block;
transition: all 0.4s;
-webkit-transition: all 0.4s;
}",
".focusSlick .slickCon .pic::before{padding-top: 66.7143%;
}",
"",
"",
"\t",
"\t\t",
"\t\t",
"\t\t\t",
"\t\t\t\t",
"\t\t\t\t\t",
"\t\t\t\t\t\t.focusSlick .prev,
.focusSlick .next{display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
cursor: pointer;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
margin: auto 0;
}
.focusSlick .prev {left: 0;
}
.focusSlick .next {right: 0;
}
.focusSlick .prev::before,
.focusSlick .next::before{display: block;
content: '';
color: #FFFFFF;
width: 10px;
height: 10px;
position: absolute;
top: 20px;
transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.focusSlick .prev::before{left: 20px;
border-left: solid 1px currentColor;
border-top: solid 1px currentColor;
}
.focusSlick .next::before{left: 18px;
border-bottom: solid 1px currentColor;
border-right: solid 1px currentColor;
}
.focusSlickDots{float: right;
width: 100px;
}
.focusSlickDots .slick-dots {height: 60px;
text-align: center;
font-size: 0;
line-height: 60px;
overflow: hidden;
}
.focusSlickDots .slick-dots li {border: 1px solid #FFFFFF;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 100%;
margin: 0 4px;
vertical-align: middle;
cursor: pointer;
}
.focusSlickDots .slick-dots li.slick-active {background: #FFFFFF;
}
.focusSlickBtn{width: 100%;
background: rgba(0,0,0,0.6);
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
z-index: 5;
}
.focusSlickText{overflow: hidden;
padding-left: 20px;
}
.focusSlickText .title{font-size: 16px;
color: #FFFFFF;
height: 60px;
line-height: 60px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.focusSlick {position: relative;
overflow: hidden;
}
.focusSlick .bd {overflow: hidden;
}
.focusSlick .slick-list {overflow: visible;
}
.focusSlick .myslide {float: left;
display: inline;
}
.focusSlick .slickCon {display: block;
transition: all 0.4s;
-webkit-transition: all 0.4s;
}
.focusSlick .slickCon .pic::before{padding-top: 66.7143%;
}"focusSlick": {
"body": [
"",
".focusSlick .prev,",
".focusSlick .next{display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
cursor: pointer;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
margin: auto 0;
}",
".focusSlick .prev {left: 0;
}",
".focusSlick .next {right: 0;
}",
".focusSlick .prev::before,",
".focusSlick .next::before{display: block;
content: '';
color: #FFFFFF;
width: 10px;
height: 10px;
position: absolute;
top: 20px;
transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}",
".focusSlick .prev::before{left: 20px;
border-left: solid 1px currentColor;
border-top: solid 1px currentColor;
}",
".focusSlick .next::before{left: 18px;
border-bottom: solid 1px currentColor;
border-right: solid 1px currentColor;
}",
".focusSlickDots{float: right;
width: 100px;
}",
".focusSlickDots .slick-dots {height: 60px;
text-align: center;
font-size: 0;
line-height: 60px;
overflow: hidden;
}",
".focusSlickDots .slick-dots li {border: 1px solid #FFFFFF;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 100%;
margin: 0 4px;
vertical-align: middle;
cursor: pointer;
}",
".focusSlickDots .slick-dots li.slick-active {background: #FFFFFF;
}",
".focusSlickBtn{width: 100%;
background: rgba(0,0,0,0.6);
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
z-index: 5;
}",
".focusSlickText{overflow: hidden;
padding-left: 20px;
}",
".focusSlickText .title{font-size: 16px;
color: #FFFFFF;
height: 60px;
line-height: 60px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}",
".focusSlick {position: relative;
overflow: hidden;
}",
".focusSlick .bd {overflow: hidden;
}",
".focusSlick .slick-list {overflow: visible;
}",
".focusSlick .myslide {float: left;
display: inline;
}",
".focusSlick .slickCon {display: block;
transition: all 0.4s;
-webkit-transition: all 0.4s;
}",
".focusSlick .slickCon .pic::before{padding-top: 66.7143%;
}",
"",
"",
"\t",
"\t\t",
"\t\t",
"\t\t\t",
"\t\t\t\t",
"\t\t\t\t\t",
"\t\t\t\t\t\t
推荐阅读
", "\t\t\t\t\t", "\t\t\t\t", "\t\t\t", "\t\t", "\t\t", "\t", "\t", "\t\t", "\t\t", "\t", "", "" ], "prefix": "focusSlick", "scope": "text.html.basic", "triggerAssist": true }
