jquery幻灯片插件slidr.js

 查看演示  website  立即下载

特点

    添加尽可能多的Slidr的，只要你想。

    动态调整大小 - 适应其内容的大小，除非你不想要它。

    键盘导航 - 前进一Slidr顶你的光标，然后点击箭头键！

    触摸导航（移动） - 改变幻灯片10:56向左，向右，向上或向下！

使用方法 

包括两种slidr.js或slidr.min.js在某个地方你的HTML页面的底部，主体内容之后。

<script type="text/javascript" src="/path/to/slidr.min.js"></script>

HTML

slidr.js适用于任何内联，内联块或块与元素的id定义。有效的幻灯片包括任何第一级子元素与数据slidr设置为父范围内的一些独特的价值属性。例如：

<ul id="slidr-ul" style="display: inline">
  <li data-slidr="one">apple</li>
  <li data-slidr="two">banana</li>
  <li data-slidr="three">coconut</li>
</ul>
<div id="slidr-img" style="display: inline-block">
  <img data-slidr="one" src="/static/images/apple.png"/>
  <img data-slidr="two" src="/static/images/banana.png"/>
  <img data-slidr="three" src="/static/images/coconut.png"/>
</div>
<div id="slidr-div" style="dislay: block">
  <div data-slidr="one">apple</div>
  <div data-slidr="two">banana</div>
  <div data-slidr="three">coconut</div>
</div>

都是有效的HTML标记来创建三个不同的Slidr在同一页中的。（内联元素转化为内联块，以申请转换）。

使用Javascript

全局slidr对象是可调用。创建slidr的最起码的方式是这样的：

slidr.create('slidr-id').start();

create（）方法接受一个可选的设置参数作为其第二个参数。所有设置的呼叫切换看起来像这样：

slidr.create('slidr-id', {
  after: function(e) { console.log('in: ' + e.in.slidr); },
  before: function(e) { console.log('out: ' + e.out.slidr); },
  breadcrumbs: true,
  controls: 'corner',
  direction: 'vertical',
  fade: false,
  keyboard: true,
  overflow: true,
  theme: '#222',
  timing: { 'cube': '0.5s ease-in' },
  touch: true,
  transition: 'cube'
}).start();

PREVIOUS:
NEXT:
jquery 360度旋转插件UIMIX.fullview
jQuery烟雾背景发生器（HTML5 Canvas插件waterpipe.js