Install with node:

npm install --save lory.js

Consume it as an ES2015 module:

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

Consume it as an commonJS module:

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

Install with bower

bower install lory --save

Local development

// To install dev dependencies run:
npm install
// To start the development server run:
npm start
// To lint your code run:
npm run lint
// To make a full new build run:
npm run build

Run tests

// To install dev dependencies run:
npm install
// To start the karma tests locally run:
npm run karma-local

Prerequisited markup

<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>

Prerequisited css

/**
 * (optional) define here the style definitions which should be applied on the slider container
 * e.g. width including further controls like arrows etc.
 */
.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;
}

Integration

<script src="js/lory.min.js"></script>
<script>
 'use strict';
 document.addEventListener('DOMContentLoaded', function() {
 var slider = document.querySelector('.js_slider');
 lory(slider, {
 // options going here
 });
 });
</script>

Integration as a jQuery Plugin

<script src="js/jquery.lory.min.js"></script>
<script>
 'use strict';
 $(function() {
 $('.js_slider').lory({
 infinite: 1
 });
 });
</script>

Integration of multiple sliders on one page

<script src="js/lory.js"></script>
<script>
 'use strict';
 document.addEventListener('DOMContentLoaded', function() {
 Array.prototype.slice.call(document.querySelectorAll('.js_slider')).forEach(function (element, index) {
 lory(element, {});
 });
 });
</script>

Public API

Options

Events

Browser Support

Copyright