jquery响应式全屏幻灯片插件Glide.js

库2016-07-194,304 人已阅来源：网络

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	滑块改变后调用

官网 github

AIHX

jquery响应式全屏幻灯片插件Glide.js

相关内容