插件描述：你永远需要最好的旋转木马。
(此方法感谢网友Dullar提供)
使用方法
1、引入文件
<link rel="stylesheet" href="style/slick.css"> <script src="script/jquery.min.js"></script> <script src="script/slick.min.js"></script>
2、HTML
<div class="slick"> <div><a href="http://www.jq22.com"><img src="images/1.jpg" alt=""></a></div> <div><a href="http://www.jq22.com"><img src="images/2.jpg" alt=""></a></div> <div><a href="http://www.jq22.com"><img src="images/3.jpg" alt=""></a></div> <div><a href="http://www.jq22.com"><img src="images/4.jpg" alt=""></a></div> <div><a href="http://www.jq22.com"><img src="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 | 垂直方向 |
方法
| 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 |
PREVIOUS:
NEXT:
相关插件-幻灯片和轮播图
3D效果左右箭头轮播的js幻灯片特效代码
效果不错的一款js幻灯片特效代码，支持3D立体效果轮播，带左右箭头按钮控制幻灯图播放，支持幻灯图标题，js代码简单易改，比用flash幻灯特效好用得多，自行修改也容易。
幻灯片和轮播图
讨论这个项目（89）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
孤存 0
2022/4/13 10:50:58
-
我按照要求引入文件，为什么会报jquery的错呢
孤存0
2022/4/13 10:55:55
-
可以了，还有一个问题，为什么slick轮播图在f12改变屏幕大小的时候，图片不会随着屏幕的大小而改变呢
氵水の雪* 0
2019/9/4 10:13:15
-
插件在拖拽或者自动轮播时 左右会闪现白块 虽然是浅浅的一闪而过 各位大神这个啥情况 呢
氵水の雪*0
2019/9/4 10:30:43
-
4张以上不会有闪现的白块 2 3张会有
。 0
2019/7/31 17:30:56
-
如何实现鼠标hover触发效果，默认都是需要点击才能触发
倾_ 听 ?1
2021/1/4 13:25:09
鼠标经过圆点进行切换，click改为mouseenter
(i("li",e.$dots).off("click.slick" → (i("li",e.$dots).off("mouseenter.slick"
(i("li",e.$dots).on("click.slick" → (i("li",e.$dots).on("mouseenter.slick"
jiachen 0
2019/6/4 16:47:13
-
我一个页面有两个轮播图，用按钮来控制显示隐藏哪一个，但是在切换之后会出现类名slick-track和slick-track子的标签里的它的子也是这样。。
回复
初心° 0
2019/3/26 16:31:26
-
为什么切换时候，切换到最后一个会自动滑回第一个呢？？？？求大神
坐 以待币1
2019/5/24 9:20:53
-
不是回滑，而是在刚刚出去屏幕的那一个会变成最后一个，js控制改变位置
happiness-维维 0
2019/3/13 9:24:59
-
IE8是不是不兼容啊
～呐0
2019/6/11 19:20:59
-
兼容啊
依稀饭0
2019/6/21 9:48:47
-
IE8 会报： 对象不支持“filter”属性或方法
少年郎，权小北 0
2019/1/18 19:41:18
-
每个图片的高度不一样，将img设置为height:100%.为啥没有用？？
少年郎，权小北0
2019/1/18 20:18:06
-
这个插件，如何实现响应式？
莫痴莫狂 0
2018/12/29 16:56:20
-
设置垂直滚动后，还是左右拖动切换，怎么改垂直拖动切换？？？？
莫痴莫狂0
2019/1/8 15:28:07
-
且在移动端，轮播图区域，无法正常滑动页面
a6947507950
2019/1/16 13:44:41
-
slick.css里面 去掉-ms-touch-action: none;touch-action: none;
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
