slick.js 基于 jQuery 的响应触摸式幻灯片插件 - 文章教程

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

发布于 2020-04-08 字数 12626 浏览 1501 评论 0

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

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

特征

  • 充分响应。随其容器缩放
  • 每个断点分别设置
  • 可用时使用 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文件中。

可选参数

accessibility boolean true 启用Tab键和箭头键导航
adaptiveHeight boolean false 为单滑块水平轮播启用自适应高度。
autoplay boolean false 启用自动播放
autoplaySpeed int(ms) 3000 自动播放速度(以毫秒为单位)
arrows boolean true 上一个/下一个箭头
asNavFor string null 将滑块设置为其他滑块的导航(类或ID名称)
appendArrows string $(element) 更改导航箭头的附加位置(选择器,htmlString,数组,元素,jQuery对象)
appendDots string $(element) 更改导航点的附加位置(选择器,htmlString,数组,元素,jQuery对象)
prevArrow string (html|jQuery selector) | object (DOM node|jQuery object) <button type=”button” class=”slick-prev”>Previous</button> 允许您选择节点或为“上一个”箭头自定义HTML。
nextArrow string (html|jQuery selector) | object (DOM node|jQuery object) <button type=”button” class=”slick-next”>Next</button> 允许您选择节点或为“下一步”箭头自定义HTML。
centerMode boolean false 通过部分上一张/下一张幻灯片启用居中视图。与奇数的slidesToShow计数一起使用。
centerPadding string ’50px’ 处于中心模式时的侧面填充(像素或%)
cssEase string ‘ease’ CSS3动画缓动
customPaging function n/a 自定义分页模板。有关使用示例,请参见源。
dots boolean false 显示圆点指示器
dotsClass string ‘slick-dots’ 滑动指示器点容器类
draggable boolean true 启用鼠标拖动
fade boolean false 启用淡入淡出
focusOnSelect boolean false 启用对选定元素的关注(单击)
easing string ‘linear’ 为jQuery动画添加缓动。与缓动库或默认缓动方法一起使用
edgeFriction integer 0.15 滑动非无限轮播边缘时的阻力
infinite boolean true 无限循环滑动
initialSlide integer 0 滑动即可开始
lazyLoad string ‘ondemand’ 设置延迟加载技术。接受“按需”或“渐进式”
mobileFirst boolean false 响应式设置使用移动优先计算
pauseOnFocus boolean true 暂停焦点自动播放
pauseOnHover boolean true 悬停时暂停自动播放
pauseOnDotsHover boolean false 悬停点时暂停自动播放
respondTo string ‘window’ 响应对象响应的宽度。可以是“窗口”,“滑块”或“最小”(两者中较小的一个)
responsive object none 包含断点和设置对象的对象(请参见演示)。在给定的屏幕宽度下启用设置设置。将设置设置为“ unslick”而不是对象,以禁用给定断点处的滑动。
rows int 1 将此设置为大于1将初始化网格模式。使用slidesPerRow设置每行应有多少张幻灯片。
slide element 元素查询用作幻灯片
slidesPerRow int 1 通过“行”选项初始化网格模式后,可以设置每个网格行中有多少张幻灯片
slidesToShow int 1 要显示的幻灯片数量
slidesToScroll int 1 要滚动的幻灯片数
speed int(ms) 300 滑动/淡入淡出动画速度
swipe boolean true 启用swiping
swipeToSlide boolean false 允许用户直接拖动或滑动到幻灯片上,而与slidesToScroll无关
touchMove boolean true 轻触即可滑动
touchThreshold int 5 要推进幻灯片,用户必须滑动(1 / touchThreshold)*滑块的宽度
useCSS boolean true 启用/禁用CSS过渡
useTransform boolean true 启用/禁用CSS转换
variableWidth boolean false 可变宽度的幻灯片
vertical boolean false 垂直滑动模式
verticalSwiping boolean false 垂直滑动模式
rtl boolean false 更改滑块的方向以从右到左
waitForAnimate boolean true 忽略动画时前进幻灯片的请求
zIndex number 1000 设置幻灯片的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);
});
afterChange slick, currentSlide 更换幻灯片后触发
beforeChange slick, currentSlide, nextSlide 更换幻灯片前触发
breakpoint event, slick, breakpoint 击中断点后触发。
destroy event, slick 滑块被破坏或打滑时。
edge slick, direction 在非无限模式下将边缘过卷时触发。
init slick 首次初始化后触发。
reInit slick 每次重新初始化后触发
setPosition slick 位置/大小更改后触发
swipe slick, direction 滑动/拖动后触发
lazyLoaded event, slick, image, imageSource 图像延迟加载后触发
lazyLoadError event, 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');
slickCurrentSlide none 返回当前幻灯片索引
slickGoTo int : slide number, boolean: dont animate 按索引导航到幻灯片
slickNext none 导航到下一张幻灯片
slickPrev none 导航到上一张幻灯片
slickPause none 暂停自动播放
slickPlay none 开始自动播放
slickAdd html or DOM object, index, addBefore 添加一张幻灯片。如果提供了索引,则将在该索引处添加,或者在设置了addBefore之前添加。如果未提供索引,则在设置了addBefore的情况下,将其添加到末尾。接受HTML字符String || Object
slickRemove index, removeBefore 按索引删除幻灯片。如果removeBefore设置为true,则删除幻灯片的前一个索引;如果未指定索引,则删除第一个幻灯片。如果removeBefore设置为false,则删除幻灯片跟随索引;如果没有索引,则删除最后一张幻灯片。
slickFilter Selector or Function 使用jQuery .filter()过滤幻灯片
slickUnfilter index 删除应用的过滤
slickGetOption option : string 获取单个选项值。
slickSetOption option : string, value : depends on option, refresh : boolean 实时设置单个值。如果它是UI更新,则将refresh设置为true。
unslick none 解构slick
getSlick none 获取 slick 对象

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0