当前位置： 文江博客文章教程详情

slick.js 基于 jQuery 的响应触摸式幻灯片插件

发布于 2020-04-08 17:52:43 字数 11237 浏览 2112 评论 0

slick.js 是一个基于 jQuery 的响应触摸式幻灯片插件，展示的效果和 swiper 差不多，不过使用范围没有 swiper 多，如果你想要这种效果，也不失为一个可选方案。

特征

  • 充分响应。随其容器缩放
  • 每个断点分别设置
  • 可用时使用 CSS3。如果没有，则功能齐全
  • 滑动已启用。或禁用，如果您愿意
  • 桌面鼠标拖动
  • 无限循环
  • 完全可用箭头键导航
  • 支持动态添加、删除、过滤
  • 支持自动播放、圆点、箭头、回调等等

使用方法

设置您的HTML标记。

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

将/ slick文件夹移到您的项目中

在您的<head>中添加 slick.css

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

在jQuery之后（在jQuery之后需要jQuery 1.7 +）之前，在关闭<body>标签之前添加slick.js

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

在脚本文件或嵌入式脚本标签中初始化滑块

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

完成后，您的HTML应该如下所示：

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>

注意：我强烈建议您将初始化脚本放在外部JS文件中。

可选参数

accessibilitybooleantrue启用Tab键和箭头键导航
adaptiveHeightbooleanfalse为单滑块水平轮播启用自适应高度。
autoplaybooleanfalse启用自动播放
autoplaySpeedint(ms)3000自动播放速度（以毫秒为单位）
arrowsbooleantrue上一个/下一个箭头
asNavForstringnull将滑块设置为其他滑块的导航（类或ID名称）
appendArrowsstring$(element)更改导航箭头的附加位置（选择器，htmlString，数组，元素，jQuery对象）
appendDotsstring$(element)更改导航点的附加位置（选择器，htmlString，数组，元素，jQuery对象）
prevArrowstring (html|jQuery selector) | object (DOM node|jQuery object)<button type="button" class="slick-prev">Previous</button>允许您选择节点或为“上一个”箭头自定义HTML。
nextArrowstring (html|jQuery selector) | object (DOM node|jQuery object)<button type="button" class="slick-next">Next</button>允许您选择节点或为“下一步”箭头自定义HTML。
centerModebooleanfalse通过部分上一张/下一张幻灯片启用居中视图。与奇数的slidesToShow计数一起使用。
centerPaddingstring'50px'处于中心模式时的侧面填充（像素或％）
cssEasestring'ease'CSS3动画缓动
customPagingfunctionn/a自定义分页模板。有关使用示例，请参见源。
dotsbooleanfalse显示圆点指示器
dotsClassstring'slick-dots'滑动指示器点容器类
draggablebooleantrue启用鼠标拖动
fadebooleanfalse启用淡入淡出
focusOnSelectbooleanfalse启用对选定元素的关注（单击）
easingstring'linear'为jQuery动画添加缓动。与缓动库或默认缓动方法一起使用
edgeFrictioninteger0.15滑动非无限轮播边缘时的阻力
infinitebooleantrue无限循环滑动
initialSlideinteger0滑动即可开始
lazyLoadstring'ondemand'设置延迟加载技术。接受“按需”或“渐进式”
mobileFirstbooleanfalse响应式设置使用移动优先计算
pauseOnFocusbooleantrue暂停焦点自动播放
pauseOnHoverbooleantrue悬停时暂停自动播放
pauseOnDotsHoverbooleanfalse悬停点时暂停自动播放
respondTostring'window'响应对象响应的宽度。可以是“窗口”，“滑块”或“最小”（两者中较小的一个）
responsiveobjectnone包含断点和设置对象的对象（请参见演示）。在给定的屏幕宽度下启用设置设置。将设置设置为“ unslick”而不是对象，以禁用给定断点处的滑动。
rowsint1将此设置为大于1将初始化网格模式。使用slidesPerRow设置每行应有多少张幻灯片。
slideelement''元素查询用作幻灯片
slidesPerRowint1通过“行”选项初始化网格模式后，可以设置每个网格行中有多少张幻灯片
slidesToShowint1要显示的幻灯片数量
slidesToScrollint1要滚动的幻灯片数
speedint(ms)300滑动/淡入淡出动画速度
swipebooleantrue启用swiping
swipeToSlidebooleanfalse允许用户直接拖动或滑动到幻灯片上，而与slidesToScroll无关
touchMovebooleantrue轻触即可滑动
touchThresholdint5要推进幻灯片，用户必须滑动（1 / touchThreshold）*滑块的宽度
useCSSbooleantrue启用/禁用CSS过渡
useTransformbooleantrue启用/禁用CSS转换
variableWidthbooleanfalse可变宽度的幻灯片
verticalbooleanfalse垂直滑动模式
verticalSwipingbooleanfalse垂直滑动模式
rtlbooleanfalse更改滑块的方向以从右到左
waitForAnimatebooleantrue忽略动画时前进幻灯片的请求
zIndexnumber1000设置幻灯片的zIndex值，对IE9和更低版本有用

事件

在 slick 1.4 版本中，回调方法已被弃用，并被事件代替。如下所示使用它们：

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});
afterChangeslick, currentSlide更换幻灯片后触发
beforeChangeslick, currentSlide, nextSlide更换幻灯片前触发
breakpointevent, slick, breakpoint击中断点后触发。
destroyevent, slick滑块被破坏或打滑时。
edgeslick, direction在非无限模式下将边缘过卷时触发。
initslick首次初始化后触发。
reInitslick每次重新初始化后触发
setPositionslick位置/大小更改后触发
swipeslick, direction滑动/拖动后触发
lazyLoadedevent, slick, image, imageSource图像延迟加载后触发
lazyLoadErrorevent, slick, image, imageSource图片加载失败后触发

方法

通过1.4版中的 slick 方法本身在 slick 实例上调用方法，请参见下文：

// Add a slide
$('.your-element').slick('slickAdd',"<div></div>");

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

这种新语法还允许您调用任何内部的slick方法：

// Manually refresh positioning of slick
$('.your-element').slick('setPosition');
slickCurrentSlidenone返回当前幻灯片索引
slickGoToint : slide number, boolean: dont animate按索引导航到幻灯片
slickNextnone导航到下一张幻灯片
slickPrevnone导航到上一张幻灯片
slickPausenone暂停自动播放
slickPlaynone开始自动播放
slickAddhtml or DOM object, index, addBefore添加一张幻灯片。如果提供了索引，则将在该索引处添加，或者在设置了addBefore之前添加。如果未提供索引，则在设置了addBefore的情况下，将其添加到末尾。接受HTML字符String || Object
slickRemoveindex, removeBefore按索引删除幻灯片。如果removeBefore设置为true，则删除幻灯片的前一个索引；如果未指定索引，则删除第一个幻灯片。如果removeBefore设置为false，则删除幻灯片跟随索引；如果没有索引，则删除最后一张幻灯片。
slickFilterSelector or Function使用jQuery .filter（）过滤幻灯片
slickUnfilterindex删除应用的过滤
slickGetOptionoption : string获取单个选项值。
slickSetOptionoption : string, value : depends on option, refresh : boolean实时设置单个值。如果它是UI更新，则将refresh设置为true。
unslicknone解构slick
getSlicknone获取 slick 对象

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群
更多

你可能也喜欢

创建 Docker Swarm 集群

重建 CentOS 或 RHEL 上被损坏的 RPM 数据库

如何退出无响应的 ssh 会话

Maven 中 optional 关键字

四种 CSS 选择器优先级详细介绍

使用 Photoshop 制作复古残旧逼真的印章

详解 WordPress 文章 Post 状态 Status

分享程序开发中10个调试和排错的小建议

上一篇：

下一篇：

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态，并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
发私信
更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

待天淡蓝洁白时

文章 0 评论 0

暗藏城府

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文