slick笔记
网址
1.中文网
2.英文网
浏览器的兼容性
目前实测过主流浏览器及ie8以上浏览器均可兼容。
优点
1、结构简单
2、兼容ie8+，能够满足我们大部分项目的使用
3、配置参数充沛，调用方法丰富
4、专门针对响应式网站
5、双联动效果，目前发现较好的优点
弊端
1、回调使用独立出来，书写就会显得有些复杂
2、tab选项卡用这个效果会出现闪现bug
3、所有控制级的按钮功能均通过js加载
使用教程
https://www.jqhtml.com/6922.html
https://www.cnblogs.com/chalk...
https://blog.csdn.net/cddcj/a...
参数
基本使用参数
参数及默认值 说明 类型 infinite: true, 循环功能 布尔值 autoplay: false, 自动播放 布尔值 arrows: true, 左右箭头 布尔值 draggable: true, 拖拽功能，启用鼠标拖动 布尔值 dots: false, 指示点 布尔值 fade:false, 开启渐隐切换模式 布尔值 centerMode:false, 中心模式 布尔值 slidesToShow: 1, 可见数,幻灯片每屏显示个数 整数 slidesToScroll: 1, 滚动个数,幻灯片每次滑动个数 整数 autoplaySpeed: 3000, 自动播放速度 整数 speed: 300, 切换动画速度 整数 appendArrows:$(element), 添加按钮元素,更改导航箭头的附加位置
（选择器，htmlString，数组，元素，jQuery对象）字符串 appendDots:$(element), 添加切换点元素,更改导航点的附加位置
（选择器，htmlString，数组，元素，jQuery对象）字符串 centerPadding:'50px', 中心模式左右内边距 字符串 asNavFor:null, 联动,将滑块设置为其他滑块的导航（类或ID名称） 字符串
其他参数
参数及默认值 说明 类型 accessibility:true, 启用Tab键和箭头键导航 布尔值 pauseOnFocus:true, 暂停焦点自动播放 布尔值 pauseOnHover:true, 鼠标悬停暂停自动播放 布尔值 pauseOnDotsHover:false, 悬停点时暂停自动播放 布尔值 swipeToSlide:false, 允许用户直接拖动或滑动到幻灯片上，
而与slidesToScroll无关布尔值 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将初始化网格模式。
使用slidesPerRow设置每行应有多少张幻灯片。
(轮播行数)数值 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),
prevArrow:Previous,允许您选择节点或为“上一个”箭头自定义HTML 代码段/element nextArrow:$(element),
nextArrow:Next,允许您选择节点或为“下一步”箭头自定义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": [ "", "", "\t", "" ], "prefix": "focusSlick", "scope": "text.html.basic", "triggerAssist": true }", "\t\t<%for(int i=0;i<3;i++){%>", "\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
联动使用
引入文件
html结构
js调用
html代码块
"tabSlick": { "body": [ "", "\t", "", "\t\t<%for(int i=0;i<6;i++){%>", "\t\t", "\t\t<%}%>", "\t", "", "\t", "" ], "prefix": "tabSlick", "scope": "text.html.basic", "triggerAssist": true }", "\t\t<%for(int i=0;i<6;i++){%>", "\t\t", "\t\t<%}%>", "\t", "
其他使用
查看总共有几个myslide
slick.slideCount判断是否开启循环
slick.options.infinite查看显示个数
slick.options.slidesToShow把指示点换成数字
// 初始化 $(".Slick .bd").on("init", function(event, slick) { $(".Slick .slick-dots li").each(function(){ $(this).text('0'+($(this).index()+1)) }); });
切换点样式
.slickDotsBox1{height: 65px;position: relative;} .slickDotsBox1 .slick-dots {position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size: 0;} .slickDotsBox1 .slick-dots li {background: rgb(148, 7, 10);width: 10px;height: 10px;border-radius: 50%;margin: 0 10px;display: inline-block;vertical-align: middle;cursor: pointer;position: relative;} .slickDotsBox1 .slick-dots li.slick-active {background: rgb(148, 7, 10);width: 45px;border-radius: 10px;}
.slickDotsBox2{height: 12px;position: relative;} .slickDotsBox2 .slick-dots {position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size: 0;} .slickDotsBox2 .slick-dots li {background: #cccccc;width: 12px;height: 12px;border-radius: 50%;margin: 0 7px;display: inline-block;vertical-align: middle;cursor: pointer;position: relative;} .slickDotsBox2 .slick-dots li.slick-active {background: #cccccc;width: 45px;border-radius: 10px;}
.Slick .slick-dots {position: absolute;bottom: 25px;left: 0;width: 100%;text-align: center;font-size: 0;animation-delay: 1.5s;} .Slick .slick-dots li {display: inline-block;width: 8px;height: 8px;border-radius: 100%;margin: 0 8px;vertical-align: middle;cursor: pointer;position: relative;border: 2px solid #fff;} .Slick .slick-dots li::before{content: '';display: none;width: 22px;height: 22px;border: 2px solid #fff;border-radius: 100%;position: absolute;top: 50%;left: 50%;margin-top: -13px;margin-left: -13px;} .Slick .slick-dots li.slick-active {width: 8px;height: 8px;background: #fff;} .Slick .slick-dots li.slick-active::before{display: block;}
左右切换按钮样式
.Slick .slick-dots {position: absolute;bottom: 15px;left: 0;width: 100%;text-align: center;font-size: 16px;color: #000000;} .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 .prev, .Slick .next{display: block;width: 20px;height: 92%;background: #f7f7f7;cursor: pointer;position: absolute;z-index: 2;top: 10px;bottom: 0;margin: auto 0;} .Slick .prev {left: 0;} .Slick .next {right: 0;} .Slick .prev::before, .Slick .next::before{display: block;content: '';position: absolute;top: 45%;display: block;content: '';width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;} .Slick .prev::before{border-right: 6px solid #999999;left: 7px;} .Slick .next::before{border-left: 6px solid #999999;left: 8px;}选中状态
.Slick .slickCon {display: block;height: 115px;position: relative;padding: 10px 4px 0;background: #fff;color: #fff;box-sizing: border-box;-webkit-box-sizing: border-box;position: relative;cursor: pointer;} .Slick .slickCon::before{content: '';display: none;width: 92%;height: 84.5%;border: 4px solid #68b1ca;position: absolute;top: 10px;left: 0;transition: all 0.4s;} .Slick .slickCon::after{content: '';display: none;width: 0;height: 0;border-left: 12px solid transparent;border-right: 12px solid transparent;border-bottom: 10px solid #68b1ca;position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;} .Slick .slick-center.slick-current .slickCon::before{display: block;} .Slick .slick-center.slick-current .slickCon::after{display: block;}
焦点轮播
html结构
js调用
css样式
.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%;}html代码块
"focusSlick": { "body": [ "", "", "\t", "" ], "prefix": "focusSlick", "scope": "text.html.basic", "triggerAssist": true }", "\t\t<%for(int i=0;i<3;i++){%>", "\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