jquery响应式全屏幻灯片插件Glide.js
Glide.js是一款响应式和对移动设备友好的jquery插件,它是基于CSS3的动画转场,同时也向后兼容旧版本的浏览器。Glide简单,轻量级和速度快等优点,用来做幻灯片滑块是最好不过了。
jquery实例:Glide使用方法
引入核心文件
<link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="jquery.glide.js"></script>
写入html
<div class="slider"> <ul class="slider__wrapper"> <li class="slider__item"></li> <li class="slider__item"></li> <li class="slider__item"></li> </ul> </div>
初始化插件
//基本初始化,使用默认值 $('.slider').glide(); //带参数初始化 $('.slider').glide({ autoplay: 5000, arrows: 'body', navigation: 'body' });
选项参数
名称 | 默认值 | 类型 | 描述 |
---|---|---|---|
autoplay | 4000 | int/bool | 是否自动播放 |
hoverpause | true | bool | 鼠标悬浮暂停播放 |
circular | true | bool | 循环播放 |
animationDuration | 500 | int | 动画时间,单位毫秒 |
animationTimingFunc | cubic-bezier(0.165, 0.840, 0.440, 1.000) | string | 动画方式函数 |
arrows | true | bool/string | 显示/隐藏/ 箭头。也可通过样式类来添加html标签 |
arrowsWrapperClass | slider__arrows | string | 箭头的样式类 |
arrowMainClass | slider__arrows-item | string | 两个箭头的主样式类 |
arrowRightClass | slider__arrows-item–right | string | 右箭头样式类 |
arrowLeftClass | slider__arrows-item–left | string | 左箭头样式类 |
arrowRightText | next | string | 右箭头文本 |
arrowLeftText | prev | string | 左箭头文本 |
navigation | true | bool/string | 展示/隐藏/添加导航. true为使用子弹模式导航,false不使用。可通过ID或CLASS来添加html标签 |
navigationCenter | true | bool | 导航居中 |
navigationClass | slider__nav | string | 导航块的样式 |
navigationItemClass | slider__nav-item | string | 导航项目的样式 |
navigationCurrentItemClass | slider__nav-item–current | string | 当前导航项目的样式 |
keyboard | true | bool | 是否使用键盘的左右箭头键 |
touchDistance | 60 | int/bool | 最小触摸滑动距离调用事件。false关闭触摸。 |
beforeInit | function(){} | function | 插件初始化前调用 |
afterInit | function(){} | function | 插件初始化后调用 |
beforeTransition | function(){} | function | 滑块改变前调用 |
afterTransition | function(){} | function | 滑块改变后调用 |