如何使用slick插件(响应式轮播插件)
简介
- 支持响应式
- 浏览器支持 CSS3 时,则使用 CSS3 过度/动画
- 支持移动设备滑动
- 支持桌面浏览器鼠标拖动
- 支持循环
- 支持左右控制
- 支持动态添加、删除、过滤
- 支持自动播放、圆点、箭头、回调等等
兼容
- 浏览器兼容:兼容 IE7+ 及其他主流浏览器,若要兼容 IE7,需修改 CSS(slick.css)。
- jQuery兼容:兼容 1.7 及以上版本。
地址链接
slick.js 中文网 | 基于jQuery的响应触摸式幻灯片插件 (slickjs.cn)https://www.slickjs.cn/
使用方法
- 引入文件
<link rel="stylesheet" href="css/slick.css"> <script src="js/jquery.min.js"></script> <script src="js/slick.min.js"></script>
- HTML部分
<div class="slick"><div><a href="#"><img src="img/1.png" alt="" /></a></div><div><a href="#"><img src="img/2.png" alt="" /></a></div><div><a href="#"><img src="img/3.png" alt="" /></a></div><div><a href="#"><img src="img/1.png" alt="" /></a></div><div><a href="#"><img src="img/2.png" alt="" /></a></div><div><a href="#"><img src="img/3.png" alt="" /></a></div><button type="button" class="slick-prev"></button><button type="button" class="slick-next"></button> </div>
- JS部分
<script>$(function () {$(".slick").slick({infinite: true,slidesToShow: 3,slidesToScroll: 1,});});</script>
效果展示
参数
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 |
如何使用slick插件(响应式轮播插件)相关推荐
- 基于Vue的响应式轮播插件|vue-owl-carousel
vue-owl-carousel 是一个基于Vue的响应式轮播插件,灵感来源于 jQuery 插件 owlCarousel. 它提供了类似于 owlCarousel 的 API 和功能,同时结合了 V ...
- html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法 在页面中引入jquery. ...
- 使用Bootstrap插件(Carousel)制作响应式轮播图
序言: 响应式轮播图制作后不管是大于768px的非移动端还是小于768px的移动端 都会加载所有资源,会导致页面的加载速度和解析效率降低 对移动端极其不利.所以我们需要手写js来动态创建 原因: 之所 ...
- 响应式轮播_角度2的响应式轮播组件
响应式轮播 Update (March 22, 2016): Provided a Demo Link which is available on PlunkerUpdate (March 21, 2 ...
- php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js
在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js,分享下使用方法: 这是一款jquery全屏响应式淡入淡出效果轮播图插件.该轮播图插件简单实用, ...
- 手机html轮播图,jquery支持移动手机的响应式轮播图插件
这是一款支持移动手机的响应式jquery轮播图插件.它具有跨平台,响应式,支持移动设备等特点,并且在使用CSS3制作过渡动画,效果非常炫酷. 使用方法 在页面中引入jquery,hammer.min. ...
- android开源轮播图框架,最好用的轮播插件框架都在这里了,Github流行轮播框架...
一般来说,一个完整的WEB项目都少不了使用JavaScript轮播插件.对于整个简单的轮播插件,有时会我们会要求它有更可控的样式,不同的使用场景也需要不同的样式,最理想的轮播插件就是可定制.除了原生开 ...
- html轮播图水平传送带,12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
- Bootstrap轮播插件,代码步骤
轮播插件: Bootstrap轮播插件是一种灵活的响应式的向站点添加滑块的方式 轮播的内容可以是,图像,内嵌框架,视频或者其他想要放置的任何类型的内容 使用该插件必须引入bootstrap.js或者压 ...
最新文章
- python图片-Python图片处理
- 我一直怀疑这孩子不是我亲生的,眼神太二了
- Hadoop分布式集群搭建hadoop2.6+Ubuntu16.04
- 使用timeit测试Python函数的性能
- 关于用notepad++确认代码中\r\n\t空格等不显示的字符
- 深入理解ajax系列第六篇——头部信息
- scikit-learn 梯度提升树(GBDT)调参小结
- HarmonyOS之常用布局DirectionalLayout的使用
- NYOJ 451(组合数+全错位)
- creo减速器建模实例_3.16减速器箱体附件建模
- 利用vSAN Performance Monitor可视化监控vSAN性能指标
- 海量数据 网站中用户积分排名问题
- 如何调试一个无法重现的错误?
- windows下桌面便签小工具简单使用技巧
- 2021年天猫淘宝双12,京东双十二活动时间以及玩法介绍
- 【盘点】最受欢迎十大中国风歌曲
- Win11如何设置系统还原点?
- Java创建图片并绘图
- 工作站 linux系统安装win7,Dell T7500工作站 Win7/RHEL5.5双系统启动菜单修复
- 小米应用商店如何做优化?有哪些方式 ?