插件描述：一个简单的，轻量级的JavaScript库 添加幻灯片切换到您的网页,无依赖。
特点
添加尽可能多的Slidr的，只要你想。
动态调整大小 - 适应其内容的大小，除非你不想要它。
键盘导航 - 前进一Slidr顶你的光标，然后点击箭头键！
触摸导航（移动） - 改变幻灯片10:56向左，向右，向上或向下！
使用方法
包括两种slidr.js或slidr.min.js在某个地方你的HTML页面的底部，主体内容之后。
1 | <script type="text/javascript" src="/path/to/slidr.min.js"></script> |
HTML
slidr.js适用于任何内联，内联块或块与元素的id定义。有效的幻灯片包括任何第一级子元素与数据slidr设置为父范围内的一些独特的价值属性。例如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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的最起码的方式是这样的：
1 | slidr.create('slidr-id').start(); |
create（）方法接受一个可选的设置参数作为其第二个参数。所有设置的呼叫切换看起来像这样：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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(); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com