[代码样式]jQuery幻灯片插件slick

[代码样式]jQuery幻灯片插件slick

简介

slick 是一个基于 jQuery 的幻灯片插件,具有以下特点:

  • 支持响应式
  • 浏览器支持 CSS3 时,则使用 CSS3 过度/动画
  • 支持移动设备滑动
  • 支持桌面浏览器鼠标拖动
  • 支持循环
  • 支持左右控制
  • 支持动态添加、删除、过滤
  • 支持自动播放、圆点、箭头、回调等等

兼容

浏览器兼容:兼容 IE7+ 及其他主流浏览器,若要兼容 IE7,需修改 CSS(slick.css)。

jQuery兼容:兼容 1.7 及以上版本。

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/style/slick.css">
<script src="https://www.dowebok.com/script/jquery.min.js"></script>
<script src="https://www.dowebok.com/script/slick.min.js"></script>

2、HTML

<div class="slick">
    <div><a href="https://www.dowebok.com"><img src="https://www.dowebok.com/images/1.jpg" alt=""></a></div>
    <div><a href="https://www.dowebok.com"><img src="https://www.dowebok.com/images/2.jpg" alt=""></a></div>
    <div><a href="https://www.dowebok.com"><img src="https://www.dowebok.com/images/3.jpg" alt=""></a></div>
    <div><a href="https://www.dowebok.com"><img src="https://www.dowebok.com/images/4.jpg" alt=""></a></div>
    <div><a href="https://www.dowebok.com"><img src="https://www.dowebok.com/images/5.jpg" alt=""></a></div>
</div>

3、JavaScript

$(function(){
    $('.slick').slick({
        dots: true
    });
});

参数

参数 类型 默认值 说明
accessibility 布尔值 true 启用Tab键和箭头键导航
autoplay 布尔值 false 自动播放
autoplaySpeed 整数 3000 自动播放间隔
centerMode 布尔值 false 中心模式
centerPadding 字符串 ’50px’ 中心模式左右内边距
cssEase 字符串 ‘ease’ CSS3 动画
customPaging function n/a 自定义分页
dots 布尔值 false 指示点
draggable 布尔值 true 启用桌面拖动
easing 字符串 ‘linear’ animate() fallback easing
fade 布尔值 false 淡入淡出
arrows 布尔值 true 左右箭头
infinite 布尔值 true 循环播放
lazyLoad 字符串 ‘ondemand’ 延迟加载,可选 ondemand 和 progressive
onBeforeChange(this, index) method null 开始切换前的回调函数
onAfterChange(this, index) method null 切换后的回调函数
onInit(this) method null 第一次初始化后的回调函数
onReInit(this) method null 再次初始化后的回调函数
pauseOnHover 布尔值 true 鼠标悬停暂停自动播放
responsive object null 断点触发设置
slide 字符串 ‘div’ 滑动元素查询
slidesToShow 整数 1 幻灯片每屏显示个数
slidesToScroll 整数 1 幻灯片每次滑动个数
speed 整数 300 滑动时间
swipe 布尔值 true 移动设备滑动事件
touchMove 布尔值 true 触摸滑动
touchThreshold 整数 5 滑动切换阈值,即滑动多少像素后切换
useCSS 布尔值 true 使用 CSS3 过度
vertical 布尔值 false 垂直方向

方法

方法 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
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]jQuery覆盖对比插件Covering-Bad

2020-10-27 14:47:09

脚本代码

[代码样式]用fullPage.js制作搜狐快站页面效果

2020-10-27 14:47:20

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索