jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）

找到一款好的幻灯片插件不容易，找到一款功能全并且使用很简单的幻灯片更不容易，今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件。 jquery.glide.js是响应和触摸友好的jQuery的滑块插件,基于CSS3也支持较老的浏览器。

STEP1 引入jQuery

1	`<script` `src="http://code.jquery.com/jquery-1.9.1.min.js"></script>`

STEP2 使用 jquery.glide.js

1	`<script` `src="jquery.glide.js"></script>`

STEP3 头部加入glide的样式表

1	`<link` `rel="stylesheet"` `type="text/css"` `href="css/style.css">`

必要的HTML标记

<div class="slider">

<ul class="slides">

<li class="slide"></li>

</ul>

</div>

初始化插件的默认选项(基础篇)：

1 2	`//就这么简单一个简单的幻灯片滑块就出来啦！` `$('.slider').glide();`

高级选项：

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" //被选中后的样式

});

Demo – 下载源码