建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

lory.js 可触屏的极简滑块轮播组件库

来源:易助科技网浏览量:34收藏

简介


lory.js是一组简约的可触屏的极简滑块轮播组件库,使用 vanilla JS开发,可用作jQuery插件。插件特定:

1)硬件加速转换;

2)可用作jQuery插件;

3)支持自定义动画功能;

4)无限循环。

(下载的附件中附有DEMO)


可触屏的极简滑块轮播组件库lory.js



浏览器支持情况:


Chrome

Safari

FireFox

Opera

Internet Explorer 10+

Internet Explorer 9(优雅,无过渡+classlistp) 需要 polyfill classlist( https://github.com/eligrey/classList.js/ )



使用


1.  引入


安装


yarn add lory.js


将其作为ES2015模块使用:


import { lory } from 'lory.js';

document.addEventListener('DOMContentLoaded', () => {
    const slider = document.querySelector('.js_slider');

    lory(slider, {
        // options going here
    });
});


将其作为通用JS模块使用:


var lory = require('lory.js').lory;

document.addEventListener('DOMContentLoaded', function() {
    var slider = document.querySelector('.js_slider');

    lory(slider, {
        // options going here
    });
});


在html中引入


<script src="js/jquery.min.js"></script>
<script src="js/lory.min.js"></script>



2.  HTML


<div class="slider js_slider">
  <div class="frame js_frame">
    <ul class="slides js_slides">
      <li class="js_slide">1</li>
      <li class="js_slide">2</li>
      <li class="js_slide">3</li>
      <li class="js_slide">4</li>
      <li class="js_slide">5</li>
      <li class="js_slide">6</li>
    </ul>
  </div>
</div>

[CSS]
.slider {}
.frame {    
  /**     * (optional) wrapper width, specifies width of the slider frame.     */
  width: 880px;position: relative;font-size: 0;line-height: 0;overflow: hidden;white-space: nowrap;}
.slides {display: inline-block;}
li {position: relative;display: inline-block;
  /**     * (optional) if the content inside the slide element has a defined size.     */
  width: 880px;}



3.  用法示例


将其作为ES2015模块使用:


import { lory } from 'lory.js';
document.addEventListener('DOMContentLoaded', () => {
  const slider = document.querySelector('.js_slider');
  lory(slider, { 
    // options going here
  });
});


将其作为commonJS模块使用:


var lory = require('lory.js').lory;
document.addEventListener('DOMContentLoaded', function() {
  var slider = document.querySelector('.js_slider');
  lory(slider, {
    // options going here
  });
});


以JQuery方式使用:


<script>
  'use strict';
  $(function() {
    $('.js_slider').lory({
      infinite: 1
    });
  });
</script>



4. API


prev滑动到上一张幻灯片
next滑动到下一张幻灯片
slideTo滑动到作为参数给出的索引:(参数:索引{number})
returnIndex返回当前幻灯片元素的索引
setup绑定事件侦听器,合并默认选项和用户选项,基于DOM设置幻灯片(在初始化期间调用一次)。如果DOM或用户选项已更改,或者需要重新绑定事件侦听器,则调用setup。
reset将滑块设置回起始位置并重置当前索引(在Resize事件中调用)
destroy通过删除所有特定于lory的事件侦听器来销毁lory实例



5. 配置项


slidesToScrollslides scrolled at oncedefault: 1
infinitelike carousel, works with multiple slides. (do not combine with rewind)default: false (number of visible slides)
enableMouseEventsenabled mouse eventsdefault: false
rewindif slider reached the last slide, with next click the slider goes back to the startindex. (do not combine with infinite)default: false
rewindPrevif slider is on the first slide, with prev click the slider goes to the last slide. (do not combine with infinite)default: false
slideSpeedtime in milliseconds for the animation of a valid slide attemptdefault: 300
rewindSpeedtime in milliseconds for the animation of the rewind after the last slidedefault: 600
snapBackSpeedtime for the snapBack of the slider if the slide attempt was not validdefault: 200
easecubic bezier easing functions: http://easings.net/dedefault: 'ease'
initialIndexthe slide index to show when the slider is initializeddefault: 0
classNameFrameclass name for slider framedefault: 'js_frame'
classNameSlideContainerclass name for slides containerdefault: 'js_slides'
classNamePrevCtrlclass name for slider previous controldefault: 'js_prev'
classNameNextCtrlclass name for slider next controldefault: 'js_next'
classNameDisabledPrevCtrlclass name for slider previous control then disableddefault: 'disabled'
classNameDisabledNextCtrlclass name for slider next control then disableddefault: 'disabled'



6. 事件


before.lory.initfires before initialisation (first in setup function)
after.lory.initfires after initialisation (end of setup function)
before.lory.slidefires before slide change | arguments: currentSlide, nextSlide
after.lory.slidefires after slide change | arguments: currentSlide
before.lory.destroyfires before the slider instance gets destroyed
after.lory.destroyfires after the slider instance gets destroyed
on.lory.resizefires on every resize event
on.lory.touchstartfires on every slider touchstart event
on.lory.touchmovefires on every slider touchmove event
on.lory.touchendfires on every slider touchend event



相关链接


官方地址:http://loryjs.github.io/lory/

GitHub 地址 :https://github.com/loryjs/lory

易助科技网效果演示和文档地址:  http://demo.easyzone.net.cn/plugin/lory/index.html