Slick.js使用方法(响应式轮播插件)

简介


slick 是一个基于 jQuery 的响应触摸式幻灯片插件,支持IE8+,Chrome, Firefox, and Safari,具有以下特点:

支持响应式

浏览器支持 CSS3 时,则使用 CSS3 过度/动画

支持移动设备滑动

支持桌面浏览器鼠标拖动

支持循环

支持左右控制

支持动态添加、删除、过滤

支持自动播放、圆点、箭头、回调等等


兼容


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

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


使用方法


1、引入文件

  <link rel="stylesheet" href="style/slick.css">

  <script src="script/jquery.min.js"></script>

  <script src="script/slick.min.js"></script>

注意:需jQuery 1.7+

2、HTML

  <div class="slick">

      <div><a href="http://www.dowebok.com"><img src="images/1.jpg" alt=""></a></div>

      <div><a href="http://www.dowebok.com"><img src="images/2.jpg" alt=""></a></div>

      <div><a href="http://www.dowebok.com"><img src="images/4.jpg" alt=""></a></div>

      <div><a href="http://www.dowebok.com"><img src="images/3.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 动画

customPagingfunctionn/a自定义分页

dots布尔值false指示点

draggable布尔值true启用桌面拖动

easing字符串‘linear’animate() fallback easing

fade布尔值false淡入淡出

arrows布尔值true左右箭头

infinite布尔值true循环播放

lazyLoad字符串‘ondemand’延迟加载,可选 ondemand 和 progressive

onBeforeChange(this, index)methodnull开始切换前的回调函数

onAfterChange(this, index)methodnull切换后的回调函数

onInit(this)methodnull第一次初始化后的回调函数

onReInit(this)methodnull再次初始化后的回调函数

pauseOnHover布尔值true鼠标悬停暂停自动播放

responsiveobjectnull断点触发设置

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()

slideRemove()

slickFilter()

slickUnfilter() 

slickSetOption(option,value,refresh)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容