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
滑块改变后调用
川公网安备 51010702002669号
18605917465
客服QQ