jquery旋转木马插件SLICK

所属分类:媒体-幻灯片和轮播图

 150245  444  查看评论 (85)
分享到微信朋友圈
X
jquery旋转木马插件SLICK ie兼容8

(此方法感谢网友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 动画
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垂直方向

方法

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

相关插件-幻灯片和轮播图

jQuery轮播图插件slider

强大轮播图3D效果slider,功能强大兼容性好。
  幻灯片和轮播图
 39714  334

jQuery轮播图插件

jQuery滑动式轮播图插件
  幻灯片和轮播图
 28891  209

易迅分块jquery焦点图

上下切换、分块展示
  幻灯片和轮播图
 19341  168

jQuery滑动式图片轮播效果

jQuery滑动式图片轮播效果兼容ie6
  幻灯片和轮播图
 29534  177

讨论这个项目(85)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    氵水の雪* 0
    2020/7/8 14:31:23
    话说分页1/2 customPaging 这个怎么使用呢 懵~~~ 回复
    氵水の雪* 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触发效果,默认都是需要点击才能触发 回复
    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
    2019/1/8 15:26:19
    移动端启用拖动后,不能正常上下滑动页面 回复
    莫痴莫狂 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;
    回复
    氵水の雪* 0
    2018/12/17 9:59:16
    dots下能有数字显示吗?或者自定义 1 2 3 4这样的?
        氵水の雪*0
        2018/12/17 10:04:10
        找到了,找到了,好笨,改改样式就好啦
    回复
取消回复