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()element : html or DOM object, index: int, addBefore: boolAdd 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: boolRemove 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 functionFilters 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

第一步：设置图片轮播的容器。---其他内容都需要放置在这个容器里

采用carousel样式，宴裤给这个容器一个ID值，方便后面采用data属性触发。

第二步：设置图片轮播计数器。

在容器div.carousel的内部添加图片轮播计时器，采用carousel-indicators样式，一般用ol有序列表（有几张图片放置几个li），以白点的形式展示(具体样式在bootstrap.css文件第5835行起)

第三步：设置轮播图片播放区

最关键的区域，主要用来放置需要轮播的图片，用carousel-inner样式控制，用item容器放置每张轮播的图升竖片。

第四步：设置图片轮播控制晌笑简器

一般图片轮播会有一个向前向后播放的控制器，在此，用carousel-control样式配合left、right来实现。

一、数运安装饿了么团队开发的vue专用的轮播图插件：vue-swipe

npm install vue-swipe

二、在index.js文件中引用vue-swipe

三、在index.js中注册组件

四返唯、在需要使用的components下面的.vue页面中直接引用

需漏毕培要写样式。样式例子：

vue-swipe的github地址：

https://github.com/ElemeFE/vue-swipe

---