找到一款好的幻灯片插件不容易，找到一款功能全并且使用很简单的幻灯片更不容易，今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件。 jquery.glide.js是响应和触摸友好的jQuery的滑块插件,基于CSS3也支持较老的浏览器。
jquery.glide.js功能介绍
轻量级压缩过后的js 仅 〜4.5 KB左右
超快速CSS3过渡，对移动设备的友好支持
响应式布局 它适用于智能手机，平板电脑和台式机。
支持API回调，支持键盘导航
构造布局简单，没有多余的代码，要多简单就多简单

如何使用jquery.glide.js
STEP1 引入jQuery
[js]<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>[/js]
STEP2 使用 jquery.glide.js
[js]<script src="jquery.glide.js"></script>[/js]
STEP3 头部加入glide的样式表
[js]<link rel="stylesheet" type="text/css" href="css/style.css">[/js]
必要的HTML标记
[js]
<div class="slider">
<ul class="slides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>[/js]
初始化插件

初始化插件的默认选项(基础篇)：
[js]
//就这么简单 一个简单的幻灯片滑块就出来啦！
$(‘.slider’).glide();[/js]

高级选项：
[js]
var glide = $(‘.slider’).glide({
//autoplay:true,//是否自动播放 默认值 true如果不需要就设置此值
animationTime:500, //动画过度效果，只有当浏览器支持CSS3的时候生效
arrows:true, //是否显示左右导航器
arrowsWrapperClass: "arrowsWrapper",//滑块箭头导航器外部DIV类名
arrowMainClass: "slider-arrow",//滑块箭头公共类名
arrowRightClass:"slider-arrow–right",//滑块右箭头类名
arrowLeftClass:"slider-arrow–left",//滑块左箭头类名
arrowRightText:">",//定义左右导航器文字或者符号也可以是类
arrowLeftText:"<",
nav:true, //主导航器也就是本例中显示的小方块
navCenter:true, //主导航器位置是否居中
navClass:"slider-nav",//主导航器外部div类名
navItemClass:"slider-nav__item", //本例中小方块的样式
navCurrentItemClass:"slider-nav__item–current" //被选中后的样式
});[/js]

学web前端可以来群一起交流啊283406814