slick.js笔记

简客陈
3,750 阅读14分钟

slick.js轮播

网址

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

slick(jq22.com)：www.jq22.com/demo/slick-…

github：github.com/kenwheeler/…

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

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

gitee：gitee.com/technical-n…

参数

参数及默认值说明类型
infinite: true,// 循环功能布尔值
autoplay: false,// 自动播放布尔值
draggable: true,// 拖拽功能，启用鼠标拖动布尔值
fade:false,// 开启渐隐切换模式布尔值
autoplaySpeed: 3000,// 自动播放速度整数
speed: 300,// 切换动画速度整数
initialSlide:0,// 默认从第几个开始，滑动即可开始数值
slidesToShow: 1,// 可见数,幻灯片每屏显示个数整数
slidesToScroll: 1,// 滚动个数,幻灯片每次滑动个数整数
slidesPerRow:1,// 每个网格行中显示个数,通过“行”选项初始化网格模式后， 可以设置每个网格行中有多少张幻灯片数值
rows:1,// 轮播行数，将此设置为大于1将初始化网格模式。 使用slidesPerRow设置每行应有多少张幻灯片。数值
arrows: true,// 是否启用左右箭头布尔值
appendArrows:$(element),// 自定义左右箭头位置
添加按钮元素,更改导航箭头的附加位置
（选择器，htmlString，数组，元素，jQuery对象）		字符串
prevArrow:$(element),// 自定义左箭头，允许您选择节点或为“上一个”箭头自定义HTML代码段/element
nextArrow:$(element),// 自定义右箭头，允许您选择节点或为“下一步”箭头自定义HTML。代码段/element
dots: false,// 是否启用指示点布尔值
dotsClass:'slick-dots',// 滑动指示器点容器类符串
appendDots:$(element),// 自定义指示点位置
添加切换点元素,更改导航点的附加位置
（选择器，htmlString，数组，元素，jQuery对象）		字符串
centerMode:false,// 中心模式,居中模式布尔值
centerPadding:'50px',// 中心模式左右内边距字符串
asNavFor:null,// 联动,将滑块设置为其他滑块的导航（类或ID名称）字符串
focusOnSelect:false,// 是否启用单击切换选定元素布尔值
customPaging// 自定义分页,默认n/afunction
verticalSwiping:false,// 垂直滑动模式布尔值
vertical:false,// 纵向滚动参数布尔值
rtl:false,// 更改滑块的方向以从右到左布尔值
accessibility:true,// 启用Tab键和箭头键导航布尔值
pauseOnFocus:true,// 暂停焦点自动播放布尔值
pauseOnHover:true,// 鼠标悬停暂停自动播放布尔值
pauseOnDotsHover:false,// 悬停点时暂停自动播放布尔值
swipeToSlide:false,// 允许用户直接拖动或滑动到幻灯片上， 而与slidesToScroll无关布尔值
useTransform:false,// 启用/禁用CSS转换布尔值
variableWidth:false,// 可变宽度的幻灯片布尔值
waitForAnimate:true,// 忽略动画时前进幻灯片的请求布尔值
mobileFirst:false,// 响应式设置使用移动优先计算布尔值
adaptiveHeight:false,// 为单滑块水平轮播启用自适应高度。布尔值
useCSS:true,// 使用 CSS3 过度布尔值
touchMove:true,// 触摸滑动布尔值
swipe:true,// 移动设备滑动事件布尔值
touchThreshold:5,// 滑动切换阈值，即滑动多少像素后切换整数
zIndex:1000,// 设置幻灯片的zIndex值，对IE9和更低版本有用数值
edgeFriction:0.15,// 滑动非无限轮播边缘时的阻力数值
cssEase:‘ease’,// CSS3 动画字符串
easing:‘linear’,// animate() fallback easing字符串
lazyLoad:‘ondemand’,// 延迟加载，可选 ondemand 和 progressive字符串
slide:'div',// 滑动元素查询字符串
respondTo:'window',// 响应对象响应的宽度。 可以是“窗口”，“滑块”或“最小”（两者中较小的一个）字符串
responsive// 断点触发设置,默认nullobject
onBeforeChange(this, index)// 开始切换前的回调函数,默认nullmethod
onAfterChange(this, index)// 切换后的回调函数,默认nullmethod
onInit(this)// 第一次初始化后的回调函数,默认nullmethod
onReInit(this)// 再次初始化后的回调函数,默认nullmethod

回调方法

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

回调方法对象说明
slick()options : object初始化 slick
initevent, slick初始化（当前对象，对象，）
beforeChangeevent, slick, currentSlide, nextSlide更换幻灯片前触发（当前对象，对象，当前索引，下一个索引）
afterChangeevent, slick, currentSlide更换幻灯片前触发（当前对象，对象，当前索引）
slickNext()切换下一张
slickPrev()切换上一张
slickPause()暂停自动播放
slickPlay()开始自动播放
slickGoTo()index : int切换到第 x 张
destroyevent, slick摧毁（当前对象，对象，）
slickCurrentSlide()返回当前幻灯片索引
unslick()销毁 slick
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").slick({});

初始化方法

// 初始化
$(".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);
});

初始化同级传值

$(".slick .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);
});

更换幻灯片前同级传值

$(".slick .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({});
$(".button").click(function(){
	$(".slick .bd").slick("slickNext");
});

切换上一张

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

$(".slick .bd").slick({});
$(".button").click(function(){
	$(".slick .bd").slick("slickPrev");
});

暂停自动播放

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

$(".slick .bd").slick({});
$(".button").click(function(){
	$(".slick .bd").slick("slickPause");
});

开始自动播放

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

$(".slick .bd").slick({});
$(".button").click(function(){
	$(".slick .bd").slick("slickPlay");
});

切换到第 x 张

$(".slick .bd").slick({});
$(".slick .bd").slick('slickGoTo',2);

返回当前幻灯片索引

$('.slick .bd').slick('slickCurrentSlide');

销毁 slick

$(".slick .bd").slick({});
$('.slick .bd').slick('unslick');

添加新的幻灯片

$(".slick .bd").slick({});
$('.slick .bd').slick('slickAdd', '<div><h3>New Slide</h3></div>');

删除幻灯片

$(".slick .bd").slick({});
$(".slick .bd").slick('slickRemove',2);

使用案例

使用引入文件

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

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

单个使用

使用版本：1.8.1

PixPin_2024-01-22_14-08-30.gif

html结构

<div class="bannerSlickBox">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6">
      <div class="pic">
        <a href="">
          <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.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: 30%;}
.bannerSlickBox .pic img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;object-position: center center;}

联动使用

使用版本：1.8.1

PixPin_2024-01-22_14-11-11.gif html结构

<div class="slick asNavForSlickTab">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6">
      <div class="pic">
        <a href="#">
          <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.jpg`" alt="图片标题" />
        </a>
      </div>
    </div>
  </div>
</div>
<div class="slick asNavForSlickTabC">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6">
      <div class="pic">
        <a href="">
          <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.jpg`" alt="图片标题" />
        </a>
      </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样式

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

多个联动使用

PixPin_2024-01-22_14-27-51.gif

使用版本：1.8.1

html结构

<div class="slick slick1">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6">
      <div class="pic">
        <a href="#">
          <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.jpg`" alt="图片标题" />
        </a>
      </div>
    </div>
  </div>
</div>
<div class="slick slick2">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6">
      <div class="pic">
        <a href="">
          <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.jpg`" alt="图片标题" />
        </a>
      </div>
    </div>
  </div>
</div>
<div class="slick slick3">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6">
      <div class="pic">
        <a href="">
          <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.jpg`" alt="图片标题" />
        </a>
      </div>
    </div>
  </div>
</div>

js调用

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

css样式

.slick {position: relative;overflow: hidden;margin-bottom: 10px;}
.slick .pic {position: relative;}
.slick .pic::before {display: block;content: '';padding-top: 30%;}
.slick .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

使用版本：1.8.1

PixPin_2024-01-22_14-38-08.gif

html结构

<div class="asNavForSlick1Box">
  <div class="asNavForSlick1Item asNavForSlick1Left">
    <div class="asNavForSlick1Con">
      <!-- 1040*561 -->
      <div class="asNavForTabCSlick slickArrows1">
        <div class="bd">
          <div class="myslide" v-for="(item,index) in 6" :data-title="`${index+1}第十批在韩中国人民志愿军烈士遗骸回国`">
            <div class="con">
              <div class="pic">
                <a href="#">
                  <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.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" v-for="(item,index) in 6">
            <div class="con">
              <div class="pic">
                <a href="#">
                  <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.jpg`" alt="图片标题" />
                </a>
              </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样式

.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;}

联动使用效果2

使用版本：1.8.1

PixPin_2024-01-22_14-48-17.gif

html结构

<div class="asNavForTabCSlick slickArrows1">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6" :data-title="`${index+1}第十批在韩中国人民志愿军烈士遗骸回国`">
      <div class="con">
        <div class="pic">
          <a href="#">
            <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.jpg`" alt="图片标题" />
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="asNavForTextBox">
    <div class="title"></div>
  </div>
</div>
<div class="asNavForTabSlick">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6">
      <div class="con">
        <div class="pic">
          <a href="#">
            <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.jpg`" alt="图片标题" />
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

js调用

$('.asNavForTabSlick .bd').slick({
  slidesToShow: 3, //可见数
  slidesToScroll: 1, //滚动个数
  centerMode: true, //中心模式
  centerPadding: '0', //中心模式左右内边距
  focusOnSelect: 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样式

.asNavForTabCSlick {position: relative;overflow: hidden;margin-bottom: 10px;}
.asNavForTabCSlick .pic {position: relative;}
.asNavForTabCSlick .pic::before {display: block;content: '';padding-top: 40%;}
.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: -10px;}
.asNavForTabSlick .con {margin: 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

PixPin_2024-01-22_15-54-39.gif

html结构

<div class="focusSlickBox">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6" :data-title="`${index+1}第十批在韩中国人民志愿军烈士遗骸回国`">
      <div class="pic">
        <a href="">
          <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.jpg`" alt="图片标题" />
        </a>
      </div>
    </div>
  </div>
  <!-- 标题 -->
  <div class="focusSlickMask">
    <div class="focusSlickDots"></div>
    <div class="focusSlickText">
      <div class="title"></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样式

/* slick焦点轮播 start */
.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;}
/* slick焦点轮播 end */

数字总个数切换

使用版本：1.8.1

PixPin_2024-01-22_15-07-21.gif

html结构

<div class="numberSlickBox">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6" :data-title="`${index+1}第十批在韩中国人民志愿军烈士遗骸回国`">
      <div class="pic">
        <a href="">
          <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.jpg`" alt="图片标题" />
        </a>
      </div>
    </div>
  </div>
  <!-- 标题 -->
  <div class="numberSlickMask">
    <span class="numberSlickCurrent"></span>
    <span class="numberSlickLine">/</span>
    <span class="numberSlickTotal"></span>
  </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样式

.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

PixPin_2024-01-22_15-11-28.gif

html结构

<div class="bannerSlickBox">
  <div class="bd">
    <div class="myslide" v-for="(item,index) in 6" :data-title="`${index+1}第十批在韩中国人民志愿军烈士遗骸回国`">
      <div class="pic">
        <a href="">
          <img :src="`http://file.clovepy-gz.sitepapa.com/img/img${index+1}.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: true, // 开启渐隐切换模式
  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;-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, //切换动画速度
});

指示点样式

image-20231219135701698.png

.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;}

image-20231219135722115.png

.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;}

image-20231219135745457.png

.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;}

切换按钮

切换按钮样式

image-20231219144200729.png

.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;}

image-20231219143045069.png

.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;}

查看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);
});

回调添加class

$(".slick .bd").on("init", function(event, slick) { // 初始化
	$(slick.$slider).find(".slick-slide .myslide").eq(0).addClass("myslide1");
	$(slick.$slider).find(".slick-slide .myslide").eq(1).addClass("myslide2");
	$(slick.$slider).find(".slick-slide .myslide").eq(2).addClass("myslide3");
	$(slick.$slider).find(".slick-slide .myslide").eq(3).addClass("myslide4");
	$(slick.$slider).find(".slick-slide .myslide").eq(4).addClass("myslide5");
});
$(".slick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide) { // 更换幻灯片前触发
	$(slick.$slider).find(".slick-slide").find('.myslide').removeClass("myslide1 myslide2 myslide3 myslide4 myslide5");
	setTimeout(function() {
		$(slick.$slider).find(".slick-active .myslide").eq(0).addClass("myslide1");
		$(slick.$slider).find(".slick-active .myslide").eq(1).addClass("myslide2");
		$(slick.$slider).find(".slick-active .myslide").eq(2).addClass("myslide3");
		$(slick.$slider).find(".slick-active .myslide").eq(3).addClass("myslide4");
		$(slick.$slider).find(".slick-active .myslide").eq(4).addClass("myslide5");
	}, 400);
});
$(".slick .bd").slick({
	infinite: false, //循环功能
	slidesToShow: 1, //可见数
	slidesToScroll: 1, //滚动个数
	autoplay: false, //自动播放
	arrows: false, //左右箭头
	draggable: true, //拖拽功能
	dots: true, //指示点
	fade:false,// 开启渐隐切换模式
	autoplaySpeed: 5000, //自动播放速度
	speed: 1500, //切换动画速度
	slidesPerRow: 5, //每个网格行中显示个数
});

function slickAddClass(slick){
  $(slick.$slider).find(".slick-active").eq(0).addClass("slide1");
  $(slick.$slider).find(".slick-active").eq(1).addClass("slide2");
  $(slick.$slider).find(".slick-active").eq(2).addClass("slide3");
  $(slick.$slider).find(".slick-active").eq(3).addClass("slide4");
  $(slick.$slider).find(".slick-active").eq(4).addClass("slide5");
}
// 初始化
$(".cloumn_xmzs_tabSlick .bd").on("init", function(event, slick) {
  slickAddClass(slick);
});
// 更换幻灯片前触发
$(".cloumn_xmzs_tabSlick .bd").on("beforeChange", function(event, slick, currentSlide, nextSlide){
  setTimeout(function () {
    slickAddClass(slick);
  },400);
});
$('.cloumn_xmzs_tabSlick .bd').slick({
  infinite: false,
  autoplay: true,
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.cloumn_xmzs_tabCSlick .bd',
  dots: false,
  centerMode: false,
  autoplaySpeed: 3000, //自动播放速度
  speed: 1500, //切换动画速度
  focusOnSelect: true
});

多个调用相同代码

方式1

if ($('.cstabSlick').length > 0) {
  for (var i = 1; i < $('.cstabSlick').length + 1; i++) {
    var tab = '.cstabSlick' + i + ' .bd';
    var tabC = '.cstabCSlick' + i + ' .bd';
    // $(tabC).on("beforeChange", function(event, slick, currentSlide, nextSlide) {
    // 	activeIndex = nextSlide;
    // });
    $(tab).slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      asNavFor: tabC,
      dots: false,
      centerMode: false,
      focusOnSelect: true,
      autoplay: true, //自动播放
      autoplaySpeed: 3000, //自动播放速度
      speed: 200, //切换动画速度
    });
    $(tabC).slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      fade: true,
      asNavFor: tab,
      autoplay: true, //自动播放
      speed: 200, //切换动画速度
    });
  }
}

方式2

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