slick.js笔记

slick.js使用文档

网址

slick英文网：http://kenwheeler.github.io/slick/

slick(jq22.com)：https://www.jq22.com/demo/slick-master/

github：https://github.com/kenwheeler/slick

slick1.6.0下载：https://pan.huang1111.cn/s/5PPgIl

slick1.8.1下载：https://pan.huang1111.cn/s/4PPdhg

参数

参数及默认值说明类型

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

参数及默认值	说明	类型
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

常用参数

参数及默认值说明类型

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名称）字符串

参数及默认值	说明	类型
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名称）	字符串

回调方法

回调方法是独立的，建议都写到你所调用的slick之上

回调方法对象说明

init event, slick 初始化（当前对象，对象，）

beforeChange event, slick, currentSlide, nextSlide 更换幻灯片前触发（当前对象，对象，当前索引，下一个索引）

afterChange event, slick, currentSlide 更换幻灯片前触发（当前对象，对象，当前索引）

destroy event, slick 摧毁（当前对象，对象，）

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 添加幻灯片。如果提供了索引，将在该索引处添加，或者如果设置了 addBefore 则在之前添加。如果没有提供索引，则添加到末尾，如果设置了 addBefore，则添加到开头。接受 HTML 字符串

slideRemove() index: int, removeBefore: bool 按索引删除幻灯片。如果 removeBefore 设置为 true，则删除幻灯片前面的索引，如果没有指定索引，则删除第一张幻灯片。如果 removeBefore 设置为 false，则删除索引后面的幻灯片，如果未设置索引，则删除最后一张幻灯片。

slickFilter() filter : 选择器或function 使用 jQuery .filter 语法过滤幻灯片

slickUnfilter() 删除应用的过滤器

slickSetOption(option,value,refresh) option : string(option name), value : depends on option, refresh : 布尔值设置一个选项。如果它是更改显示的选项，则将刷新设置为 true

回调方法	对象	说明
init	event, slick	初始化（当前对象，对象，）
beforeChange	event, slick, currentSlide, nextSlide	更换幻灯片前触发（当前对象，对象，当前索引，下一个索引）
afterChange	event, slick, currentSlide	更换幻灯片前触发（当前对象，对象，当前索引）
destroy	event, slick	摧毁（当前对象，对象，）

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	添加幻灯片。如果提供了索引，将在该索引处添加，或者如果设置了 addBefore 则在之前添加。如果没有提供索引，则添加到末尾，如果设置了 addBefore，则添加到开头。接受 HTML 字符串
slideRemove()	index: int, removeBefore: bool	按索引删除幻灯片。如果 removeBefore 设置为 true，则删除幻灯片前面的索引，如果没有指定索引，则删除第一张幻灯片。如果 removeBefore 设置为 false，则删除索引后面的幻灯片，如果未设置索引，则删除最后一张幻灯片。
slickFilter()	filter : 选择器或function	使用 jQuery .filter 语法过滤幻灯片
slickUnfilter()		删除应用的过滤器
slickSetOption(option,value,refresh)	option : string(option name), value : depends on option, refresh : 布尔值	设置一个选项。如果它是更改显示的选项，则将刷新设置为 true

初始化方法

 // 初始化
 $(".slick .bd").on("init", function(event, slick) {
 
 });

初始化传值

 // 初始化
 $(".slick .bd").on("init", function(event, slick) {
   var title=slick.$slides.eq(slick.currentSlide).find(".slickCon").data("title");
   $(".focusSlickText .title").html(title);
 });

调用同级传值

 $(".focusSlickBox .bd").on("init", function(event, slick) {// 初始化
  var title=slick.$slides.eq(slick.currentSlide).find('.myslide').data("title");
  $(slick.$slider).siblings('.focusSlickMask').find('.title').html(title);
 });

更换幻灯片前触发方法

 // 更换幻灯片前触发
 $(".slick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){
 
 });

更换幻灯片前传值

 // 更换幻灯片前触发
 $(".slick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){
   var title=slick.$slides.eq(nextSlide).find(".slickCon").data("title");
   $(".focusSlickText .title").html(title);
 });

调用同级传值

 $(".focusSlickBox .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){// 更换幻灯片前触发
  var title=slick.$slides.eq(nextSlide).find('.myslide').data("title");
  $(slick.$slider).siblings('.focusSlickMask').find('.title').html(title);
 });

更换幻灯片后触发方法

 //更换幻灯片后触发
 $(".slick .bd").on("afterChange", function(event, slick, currentSlide){
 
 });

更换幻灯片后传值

 //更换幻灯片后触发
 $(".slick .bd").on("afterChange", function(event, slick, currentSlide){
   var title=slick.$slides.eq(currentSlide).find(".slickCon").data("title");
   $(".focusSlickText .title").html(title);
 });

切换下一张

<button class="button" type="button">切换下一张</button>

$(".slick .bd").slick({
infinite: true, //循环功能
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
autoplay: true, //自动播放
arrows: false, //左右箭头
draggable: true, //拖拽功能
dots: false, //指示点
fade:false,// 开启渐隐切换模式
autoplaySpeed: 3000, //自动播放速度
speed: 1500, //切换动画速度
});
$(".button").click(function(){
	$(".slick .bd").slick("slickNext");
});

切换上一张

<button class="button" type="button">切换下一张</button>

$(".slick .bd").slick({
infinite: true, //循环功能
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
autoplay: true, //自动播放
arrows: false, //左右箭头
draggable: true, //拖拽功能
dots: false, //指示点
fade:false,// 开启渐隐切换模式
autoplaySpeed: 3000, //自动播放速度
speed: 1500, //切换动画速度
});
$(".button").click(function(){
	$(".slick .bd").slick("slickPrev");
});

暂停自动播放

<button class="button" type="button">切换下一张</button>

$(".slick .bd").slick({
infinite: true, //循环功能
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
autoplay: true, //自动播放
arrows: false, //左右箭头
draggable: true, //拖拽功能
dots: false, //指示点
fade:false,// 开启渐隐切换模式
autoplaySpeed: 3000, //自动播放速度
speed: 1500, //切换动画速度
});
$(".button").click(function(){
	$(".slick .bd").slick("slickPause");
});

开始自动播放

<button class="button" type="button">切换下一张</button>

$(".slick .bd").slick({
infinite: true, //循环功能
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
autoplay: true, //自动播放
arrows: false, //左右箭头
draggable: true, //拖拽功能
dots: false, //指示点
fade:false,// 开启渐隐切换模式
autoplaySpeed: 3000, //自动播放速度
speed: 1500, //切换动画速度
});
$(".button").click(function(){
	$(".slick .bd").slick("slickPlay");
});

切换到第 x 张

$(".banner_banner1 .bd").slick({
infinite: true, //循环功能
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
autoplay: true, //自动播放
arrows: true, //左右箭头
draggable: true, //拖拽功能
dots: true, //指示点
fade:false,// 开启渐隐切换模式
autoplaySpeed: 3000, //自动播放速度
speed: 1500, //切换动画速度
});
$(".banner_banner1 .bd").slick('slickGoTo',2);

查看slide总个数

// 初始化
$(".slick .bd").on("init", function(event, slick) {
	console.log(slick.slideCount);
});

查看是否开启循环

// 初始化
$(".slick .bd").on("init", function(event, slick) {
	console.log(slick.options.infinite);
});

查看显示个数

// 初始化
$(".slick .bd").on("init", function(event, slick) {
	console.log(slick.options.slidesToShow);
});

使用案例

使用引入文件

引入文件根据自己资源文件引入即可

<script src="./components/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- slick轮播 start -->
<link href="./components/slick/slick.css" rel="stylesheet" type="text/css" />
<script src="./components/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<!-- slick轮播 end -->

单个使用

使用版本：1.8.1

html结构

<div class="bannerSlickBox">
<div class="bd">
 <div class="myslide">
   <div class="pic">
     <a href="">
       <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片标题" />
     </a>
   </div>
 </div>
 <div class="myslide">
   <div class="pic">
     <a href="">
       <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片标题" />
     </a>
   </div>
 </div>
 <div class="myslide">
   <div class="pic">
     <a href="">
       <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片标题" />
     </a>
   </div>
 </div>
</div>
</div>

js调用

$(".bannerSlickBox .bd").slick({
infinite: true, //循环功能
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
autoplay: true, //自动播放
arrows: true, //左右箭头
draggable: true, //拖拽功能
dots: true, //指示点
fade: false, // 开启渐隐切换模式
autoplaySpeed: 3000, //自动播放速度
speed: 1500, //切换动画速度
});

css样式

.bannerSlickBox {position: relative;overflow: hidden;}
.bannerSlickBox .pic {position: relative;}
.bannerSlickBox .pic::before {display: block;content: '';padding-top: 66.7143%;}
.bannerSlickBox .pic img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;object-position: center center;}

联动使用

使用版本：1.8.1

html结构

<div class="box">
<div class="asNavForSlickBox asNavForSlickTab">
 <div class="bd">
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img4.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
 </div>
</div>
<div class="asNavForSlickBox  asNavForSlickTabC">
 <div class="bd">
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img4.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
 </div>
</div>
</div>

js调用

$('.asNavForSlickTab .bd').slick({
slidesToShow: 3, //可见数
slidesToScroll: 1, //滚动个数
arrows: false, //左右箭头
dots: false, //指示点
fade: false, // 开启渐隐切换模式
focusOnSelect: true, //单击切换
centerMode: true, //中心模式
centerPadding: '0px', // 中心模式左右内边距
asNavFor: '.asNavForSlickTabC .bd', //联动
});
$('.asNavForSlickTabC .bd').slick({
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
arrows: true, //左右箭头
dots: true, //指示点
fade: false, // 开启渐隐切换模式
fade: true, // 开启渐隐切换模式
asNavFor: '.asNavForSlickTab .bd', //联动
});

css样式

.box {width: 500px;margin: 100px auto;}
.asNavForSlickBox {position: relative;overflow: hidden;}
.asNavForSlickBox .pic {position: relative;}
.asNavForSlickBox .pic::before {display: block;content: '';padding-top: 66.7143%;}
.asNavForSlickBox .pic img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;object-position: center center;}
.asNavForSlickTab .bd{margin: 0 -5px;}
.asNavForSlickTab .myslide .pic {margin: 0 5px;}

联动切换效果

使用版本：1.8.1

html结构

<div class="box">
<div class="asNavForSlick1Box">
 <div class="asNavForSlick1Item asNavForSlick1Left">
   <div class="asNavForSlick1Con">
     <!-- 1040*561 -->
     <div class="asNavForTabCSlick slickArrows1">
       <div class="bd">
         <div class="myslide" data-title="1第十批在韩中国人民志愿军烈士遗骸回国">
           <div class="con">
             <div class="pic default">
               <a href="" title="图片">
                 <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片">
               </a>
             </div>
           </div>
         </div>
         <div class="myslide" data-title="2第十批在韩中国人民志愿军烈士遗骸回国">
           <div class="con">
             <div class="pic default">
               <a href="" title="图片">
                 <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片">
               </a>
             </div>
           </div>
         </div>
         <div class="myslide" data-title="3第十批在韩中国人民志愿军烈士遗骸回国">
           <div class="con">
             <div class="pic default">
               <a href="" title="图片">
                 <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片">
               </a>
             </div>
           </div>
         </div>
         <div class="myslide" data-title="4第十批在韩中国人民志愿军烈士遗骸回国">
           <div class="con">
             <div class="pic default">
               <a href="" title="图片">
                 <img src="http://file.clovepy-gz.sitepapa.com/img/img4.jpg" alt="图片">
               </a>
             </div>
           </div>
         </div>
       </div>
       <div class="asNavForTextBox">
         <div class="title"></div>
       </div>
     </div>
   </div>
 </div>
 <div class="asNavForSlick1Item asNavForSlick1Right">
   <div class="asNavForSlick1Con">
     <!-- 320*180 -->
     <div class="asNavForTabSlick">
       <div class="bd">
         <div class="myslide">
           <div class="con">
             <div class="pic default">
               <a href="javascript:void(0);" title="图片">
                 <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片">
               </a>
             </div>
           </div>
         </div>
         <div class="myslide">
           <div class="con">
             <div class="pic default">
               <a href="javascript:void(0);" title="图片">
                 <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片">
               </a>
             </div>
           </div>
         </div>
         <div class="myslide">
           <div class="con">
             <div class="pic default">
               <a href="javascript:void(0);" title="图片">
                 <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片">
               </a>
             </div>
           </div>
         </div>
         <div class="myslide">
           <div class="con">
             <div class="pic default">
               <a href="javascript:void(0);" title="图片">
                 <img src="http://file.clovepy-gz.sitepapa.com/img/img4.jpg" alt="图片">
               </a>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>
</div>

js调用

$('.asNavForTabSlick .bd').slick({
slidesToShow: 3, //可见数
slidesToScroll: 1, //滚动个数
centerMode: true, //中心模式
centerPadding: '0', //中心模式左右内边距
focusOnSelect: true, //单击切换
vertical: true, //纵向滚动参数
verticalSwiping: true, //垂直滑动模式
autoplay: true, //自动播放
autoplaySpeed: 3000, //自动播放速度
speed: 1000, //切换动画速度
infinite: true, //循环功能
arrows: false, //左右箭头
asNavFor: '.asNavForTabCSlick .bd', //联动
});
$(".asNavForTabCSlick .bd").on("init", function(event, slick) { // 初始化
var title=slick.$slides.eq(slick.currentSlide).find('.myslide').data("title");
$(slick.$slider).siblings('.asNavForTextBox').find('.title').html(title);
});
$(".asNavForTabCSlick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide) { // 更换幻灯片前触发
var title = slick.$slides.eq(nextSlide).find('.myslide').data("title");
$(slick.$slider).siblings('.asNavForTextBox').find('.title').html(title);
});
$('.asNavForTabCSlick .bd').slick({
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
arrows: true, //左右箭头
dots: false, //指示点
fade: false, // 开启渐隐切换模式
asNavFor: '.asNavForTabSlick .bd', //联动
});

css样式

.box {width: 1200px;margin: 50px auto;}
.asNavForSlick1Box {position: relative;margin-right: -20px;overflow: hidden;}
.asNavForSlick1Box:after {display: block;content: ' ';clear: both;visibility: hidden;}
.asNavForSlick1Box>.asNavForSlick1Item {float: left;display: inline;}
.asNavForSlick1Box>.asNavForSlick1Item>.asNavForSlick1Con {margin-right: 20px;}
.asNavForSlick1Box>.asNavForSlick1Left {width: 75.6%;}
.asNavForSlick1Box>.asNavForSlick1Right {width: 24.3%;}
.asNavForTabCSlick {position: relative;overflow: hidden;}
.asNavForTabCSlick .pic {position: relative;}
.asNavForTabCSlick .pic::before {display: block;content: '';padding-top: 53.9423%;}
.asNavForTabCSlick .pic img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;object-position: center center;}
.asNavForTabSlick .bd {overflow: hidden;margin-bottom: -10px;}
.asNavForTabSlick .con {margin-bottom: 10px;cursor: pointer;}
.asNavForTabSlick .pic {position: relative;}
.asNavForTabSlick .pic::before {display: block;content: '';padding-top: 56.25%;}
.asNavForTabSlick .pic img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;object-position: center center;}
.asNavForTabSlick .pic::after {display: block;content: '';width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);position: absolute;top: 0;left: 0;z-index: 2;}
.asNavForTabSlick .myslide.slick-current .pic::after {z-index: -1;}
.asNavForTextBox {width: 100%;height: 70px;background-repeat: no-repeat;background-position: center bottom;background-size: auto 70px;background-image: url("../images/mask1.png");position: absolute;left: 0;bottom: 0;z-index: 2;}
.asNavForTextBox .title {font-size: 16px;color: #ffffff;height: 70px;line-height: 70px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 32px;}

多个联动使用

使用版本：1.8.1

html结构

<div class="box">
<div class="asNavForSlickBox asNavForSlickBox1">
 <div class="bd">
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img4.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
 </div>
</div>
<div class="asNavForSlickBox  asNavForSlickBox2">
 <div class="bd">
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img4.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
 </div>
</div>
<div class="asNavForSlickBox  asNavForSlickBox3">
 <div class="bd">
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="javascript:void(0);">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img4.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
 </div>
</div>
</div>

js调用

$('.asNavForSlickBox1 .bd').slick({
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
arrows: true, //左右箭头
dots: false, //指示点
fade: false, // 开启渐隐切换模式
focusOnSelect: true, //单击切换
centerMode: true, //中心模式
centerPadding: '0px', // 中心模式左右内边距
asNavFor: '.asNavForSlickBox2 .bd,.asNavForSlickBox3 .bd', //联动
});
$('.asNavForSlickBox2 .bd').slick({
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
arrows: true, //左右箭头
dots: false, //指示点
fade: false, // 开启渐隐切换模式
fade: false, // 开启渐隐切换模式
asNavFor: '.asNavForSlickBox1 .bd,.asNavForSlickBox3 .bd', //联动
});
$('.asNavForSlickBox3 .bd').slick({
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
arrows: true, //左右箭头
dots: false, //指示点
fade: false, // 开启渐隐切换模式
fade: false, // 开启渐隐切换模式
asNavFor: '.asNavForSlickBox1 .bd,.asNavForSlickBox2 .bd', //联动
});

css样式

.box {width: 500px;margin: 50px auto;}
.asNavForSlickBox {position: relative;overflow: hidden;}
.asNavForSlickBox .pic {position: relative;}
.asNavForSlickBox .pic::before {display: block;content: '';padding-top: 46.7143%;}
.asNavForSlickBox .pic img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;object-position: center center;}

焦点轮播使用

使用版本：1.8.1

html结构

<div class="box">
<div class="focusSlickBox">
 <div class="bd">
   <div class="myslide" data-title="1标题">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide" data-title="2标题">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide" data-title="3标题">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
 </div>
 <!-- 标题 -->
 <div class="focusSlickMask">
   <div class="focusSlickDots"></div>
   <div class="focusSlickText">
     <div class="title"></div>
   </div>
 </div>
</div>
</div>

js调用

$(".focusSlickBox .bd").on("init", function(event, slick) {// 初始化
var title=slick.$slides.eq(slick.currentSlide).find('.myslide').data("title");
$(slick.$slider).siblings('.focusSlickMask').find('.title').html(title);
});
$(".focusSlickBox .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){// 更换幻灯片前触发
var title=slick.$slides.eq(nextSlide).find('.myslide').data("title");
$(slick.$slider).siblings('.focusSlickMask').find('.title').html(title);
});
$(".focusSlickBox .bd").slick({
infinite: true, //循环功能
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
autoplay: true, //自动播放
arrows: true, //左右箭头
draggable: true, //拖拽功能
dots: true, //指示点
fade:false,// 开启渐隐切换模式
autoplaySpeed: 3000, //自动播放速度
speed: 1000, //切换动画速度
appendDots:".focusSlickBox .focusSlickDots",//自定义切换点
});

css样式

.focusSlickBox {position: relative;overflow: hidden;}
.focusSlickBox .pic {position: relative;}
.focusSlickBox .pic::before {display: block;content: '';padding-top: 66.7143%;}
.focusSlickBox .pic img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;object-position: center center;}
.focusSlickMask {width: 100%;background: rgba(0, 0, 0, 0.6);position: absolute;left: 0;bottom: 0;overflow: hidden;z-index: 2;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 20px;}
.focusSlickDots {float: right;display: inline;margin-left: 20px;}
.focusSlickDots .slick-dots {position: unset;height: 60px;text-align: center;font-size: 0;line-height: 60px;overflow: hidden;}
.focusSlickDots .slick-dots li {margin: 0;border: 1px solid #FFFFFF;display: inline-block;width: 8px;height: 8px;border-radius: 100%;vertical-align: middle;cursor: pointer;}
.focusSlickDots .slick-dots li+li {margin: 0 0 0 8px;}
.focusSlickDots .slick-dots li.slick-active {background: #FFFFFF;}
.focusSlickText {overflow: hidden;}
.focusSlickText .title {font-size: 16px;color: #FFFFFF;height: 60px;line-height: 60px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

数字总个数切换

使用版本：1.8.1

html结构

<div class="box">
<div class="numberSlickBox">
 <div class="bd">
   <div class="myslide" data-title="1标题">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide" data-title="2标题">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide" data-title="3标题">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
 </div>
 <!-- 标题 -->
 <div class="numberSlickMask">
   <span class="numberSlickCurrent"></span>
   <span class="numberSlickLine">/</span>
   <span class="numberSlickTotal"></span>
 </div>
</div>
</div>

js调用

$(".numberSlickBox .bd").on("init", function(event, slick) {// 初始化
var current=$(slick.$slider).siblings('.numberSlickMask').find('.numberSlickCurrent');
var total=$(slick.$slider).siblings('.numberSlickMask').find('.numberSlickTotal');
current.html('0'+(slick.currentSlide+1));
(slick.slideCount>9)?(total.html(slick.slideCount)):(total.html("0"+slick.slideCount));
});
$(".numberSlickBox .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){// 更换幻灯片前触发
var current=$(slick.$slider).siblings('.numberSlickMask').find('.numberSlickCurrent');
var total=$(slick.$slider).siblings('.numberSlickMask').find('.numberSlickTotal');
var currentIndex=nextSlide + 1;
(currentIndex>9)?(current.html(currentIndex)):(current.html("0"+currentIndex));
});
$(".numberSlickBox .bd").slick({
infinite: true, //循环功能
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
autoplay: true, //自动播放
arrows: true, //左右箭头
draggable: true, //拖拽功能
dots: false, //指示点
fade:false,// 开启渐隐切换模式
autoplaySpeed: 3000, //自动播放速度
speed: 1000, //切换动画速度
});

css样式

.box{width: 500px;margin: 100px auto;}
.numberSlickBox {position: relative;overflow: hidden;}
.numberSlickBox .pic {position: relative;}
.numberSlickBox .pic::before {display: block;content: '';padding-top: 66.7143%;}
.numberSlickBox .pic img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;object-position: center center;}
.numberSlickMask {width: 100%;position: absolute;left: 0;bottom: 30px;overflow: hidden;z-index: 2;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 20px;font-size: 0;text-align: center;}
.numberSlickMask span{display: inline-block;vertical-align: text-bottom;font-size: 16px;color: #fff;}
.numberSlickMask .numberSlickCurrent{font-size: 20px;}
.numberSlickMask .numberSlickLine{margin: 0 4px;}

缩放切换

使用版本：1.8.1

html结构

<div class="box">
<div class="bannerSlickBox">
 <div class="bd">
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img1.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img2.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
   <div class="myslide">
     <div class="pic">
       <a href="">
         <img src="http://file.clovepy-gz.sitepapa.com/img/img3.jpg" alt="图片标题" />
       </a>
     </div>
   </div>
 </div>
</div>
</div>

js调用

$(".bannerSlickBox .bd").slick({
infinite: true, //循环功能
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
autoplay: true, //自动播放
arrows: true, //左右箭头
draggable: true, //拖拽功能
dots: true, //指示点
fade: true, // 开启渐隐切换模式
autoplaySpeed: 3000, //自动播放速度
speed: 1500, //切换动画速度
});

css样式

.box{width: 1200px;margin: 50px auto;}
.bannerSlickBox {position: relative;overflow: hidden;}
.bannerSlickBox .pic {position: relative;}
.bannerSlickBox .pic::before {display: block;content: '';padding-top: 66.7143%;}
.bannerSlickBox .pic img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;object-position: center center;-webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);-webkit-transform: scale(1.2);transform: scale(1.2);}
.bannerSlickBox .slick-active .pic img {-webkit-transform: scale(1);transform: scale(1);}

指示点

数字指示点

$(".numberSlickBox .bd").slick({
infinite: true, //循环功能
slidesToShow: 1, //可见数
slidesToScroll: 1, //滚动个数
autoplay: true, //自动播放
arrows: true, //左右箭头
draggable: true, //拖拽功能
dots: true, //指示点
customPaging: function(slider, i) {
 return (slider.slideCount>9)?(i + 1):('0'+(i+1));;
},
fade:false,// 开启渐隐切换模式
autoplaySpeed: 3000, //自动播放速度
speed: 1000, //切换动画速度
});

指示点样式

.slick-dots {text-align: center;font-size: 0;}
.slick-dots li {margin: 0 8px;display: inline-block;vertical-align: middle;cursor: pointer;position: relative;font-size: 14px;color: #333;-webkit-transition: .3s linear;transition: .3s linear;}
.slickDots1 {position: relative;}
.slickDots1 .slick-dots {position: absolute;bottom: 15px;left: 0;width: 100%;}
.slickDots1 .slick-dots li {border: 1px solid #FFFFFF;width: 10px;height: 10px;border-radius: 50%;}
.slickDots1 .slick-dots li.slick-active {border: 1px solid #FFFFFF;background: #FFFFFF;}

.slick-dots {text-align: center;font-size: 0;}
.slick-dots li {margin: 0 8px;display: inline-block;vertical-align: middle;cursor: pointer;position: relative;font-size: 14px;color: #333;-webkit-transition: .3s linear;transition: .3s linear;}
.slickDots2 .slick-dots {position: absolute;bottom: 25px;left: 0;width: 100%;}
.slickDots2 {position: relative;}
.slickDots2 .slick-dots li {width: 8px;height: 8px;border-radius: 100%;border: 2px solid #fff;}
.slickDots2 .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;-webkit-transition: .3s linear;transition: .3s linear;}
.slickDots2 .slick-dots li.slick-active {width: 8px;height: 8px;background: #fff;}
.slickDots2 .slick-dots li.slick-active::before {display: block;}

.slick-dots {text-align: center;font-size: 0;}
.slick-dots li {margin: 0 8px;display: inline-block;vertical-align: middle;cursor: pointer;position: relative;font-size: 14px;color: #333;-webkit-transition: .3s linear;transition: .3s linear;}
.slickDots3 .slick-dots {position: absolute;bottom: 25px;left: 0;width: 100%;}
.slickDots3 .slick-dots li {background: #fff;width: 10px;height: 10px;border-radius: 50%;}
.slickDots3 .slick-dots li.slick-active {background: #fff;width: 45px;border-radius: 10px;}

切换按钮样式

.slick-arrow {display: block;cursor: pointer;position: absolute;top: 0;bottom: 0;margin: auto;-webkit-transition: .3s linear;transition: .3s linear;z-index: 5;width: 0;height: 0;}
.slick-arrow::before {display: block;content: '';color: #FFFFFF;width: 10px;height: 10px;position: absolute;top: 15px;left: 0;border-left: 1px solid currentColor;border-top: 1px solid currentColor;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transition: .3s linear;transition: .3s linear;}
.slick-prev {left: 0;}
.slick-next {right: 0;}
.slick-arrow:hover {background: rgba(0, 0, 0, 1);}
.slick-next::before {-webkit-transform: rotate(135deg);transform: rotate(135deg);right: 0;left: unset;margin-right: 10px;}
.slick-prev::before {margin-left: 10px;}
.slick-slider:hover .slick-arrow {-webkit-transform: translateX(0);transform: translateX(0);}
.slickArrows1 .slick-arrow {background: rgba(0, 0, 0, 0.6);width: 30px;height: 40px;}

.slick-arrow {display: block;cursor: pointer;position: absolute;top: 0;bottom: 0;margin: auto;-webkit-transition: .3s linear;transition: .3s linear;z-index: 5;width: 0;height: 0;}
.slick-arrow::before {display: block;content: '';color: #FFFFFF;width: 10px;height: 10px;position: absolute;top: 15px;left: 0;border-left: 1px solid currentColor;border-top: 1px solid currentColor;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transition: .3s linear;transition: .3s linear;}
.slick-prev {left: 0;}
.slick-next {right: 0;}
.slick-arrow:hover {background: rgba(0, 0, 0, 1);}
.slick-next::before {-webkit-transform: rotate(135deg);transform: rotate(135deg);right: 0;left: unset;margin-right: 10px;}
.slick-prev::before {margin-left: 10px;}
.slick-slider:hover .slick-arrow {-webkit-transform: translateX(0);transform: translateX(0);}
.slickArrows2 .slick-arrow {background: rgba(0, 0, 0, 0.6);width: 50px;height: 50px;border-radius: 50%;-webkit-transform: translateX(-100%);transform: translateX(-100%);}
.slickArrows2 .slick-next {-webkit-transform: translateX(100%);transform: translateX(100%);}
.slickArrows2 .slick-arrow::before {top: 20px;}
.slickArrows2 .slick-prev::before {margin-left: 21px;}
.slickArrows2 .slick-next::before {margin-right: 21px;}

posted @ 2021-10-26 15:56 简客陈阅读(2807) 评论(0) 收藏举报

刷新页面返回顶部

无知小二

slick.js笔记

slick.js使用文档

网址

参数

常用参数

回调方法

初始化方法

更换幻灯片前触发方法

更换幻灯片后触发方法

切换下一张

切换上一张

暂停自动播放

开始自动播放

切换到第 x 张

查看slide总个数

查看是否开启循环

查看显示个数

使用案例

使用引入文件

单个使用

联动使用

联动切换效果

多个联动使用

焦点轮播使用

数字总个数切换

缩放切换

指示点

数字指示点

指示点样式

切换按钮样式

公告