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

来源：易助科技网浏览量：18收藏

简介

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

1）硬件加速转换；

2）可用作jQuery插件；

3）支持自定义动画功能；

4）无限循环。

（下载的附件中附有DEMO）

API：

prev	slides to the previous slide
next	slides to the next slide
slideTo	slides to the index given as an argument: (arguments: index {number})
returnIndex	returns the index of the current slide element
setup	Binds eventlisteners, merging default and user options, setup the slides based on DOM (called once during initialisation). Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.
reset	sets the slider back to the starting position and resets the current index (called on Resize event)
destroy	destroys the lory instance by removing all lory specific event listeners

使用

1. 引入文件

<script src="js/lory.min.js"></script>
<script src="js/jquery.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>

建站资源下载详情

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

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

简介

使用

1. 引入文件

2. HTML

3. 用法示例

相关链接