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

2014-05-22阅读(5276)评论(1)

W3Cways.com 微信公众号

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

jquery.glide.js功能介绍

  • 轻量级压缩过后的js 仅 〜4.5 KB左右
  • 超快速CSS3过渡,对移动设备的友好支持
  • 响应式布局 它适用于智能手机,平板电脑和台式机。
  • 支持API回调,支持键盘导航
  • 构造布局简单,没有多余的代码,要多简单就多简单

如何使用jquery.glide.js

STEP1 引入jQuery

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

STEP2 使用 jquery.glide.js

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

STEP3 头部加入glide的样式表

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

必要的HTML标记

<div class="slider">
  <ul class="slides">
    <li class="slide"></li>
    <li class="slide"></li>
    <li class="slide"></li>
  </ul>
</div>

初始化插件

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

//就这么简单 一个简单的幻灯片滑块就出来啦!
$('.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:"&gt;",//定义左右导航器文字或者符号也可以是类
      arrowLeftText:"&lt;",

      nav:true, //主导航器也就是本例中显示的小方块
      navCenter:true, //主导航器位置是否居中
      navClass:"slider-nav",//主导航器外部div类名
      navItemClass:"slider-nav__item", //本例中小方块的样式
      navCurrentItemClass:"slider-nav__item--current" //被选中后的样式
});

Demo下载源码

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)

分享到:更多 ()

Web前端开发-Web前端工程师--Web前端学习之路

联系我们