Please visit: http://loryjs.github.io/lory/
Touch enabled minimalistic slider written in vanilla JavaScript.
Download
lory is released under the MIT license & supports modern environments. There is also a prebundled CDN version which you can use.CDN: https://cdnjs.com/libraries/lory.js/
Install with yarn:
yarn add lory.jsConsume 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 --saveLocal development
// To install dev dependencies run:
yarn
// To start the development server run:
yarn run dev
// To lint your code run:
yarn run lint
// To make a full new build run:
yarn run buildRun tests
// To install dev dependencies run:
yarn install
// To start the karma tests locally run:
yarn 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="dist/jquery.lory.js"></script>
<script>
'use strict';
$(function() {
$('.js_slider').lory({
infinite: 1
});
});
</script>Integration of multiple sliders on one page
<script src="dist/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
Getting Help
Please, do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged withloryJS.StackOverflow is a much better place to ask questions since:
- There are hundreds of people willing to help on StackOverflow
- Questions and answers stay available for public viewing so your question / answer might help someone else
- The StackOverflow voting system assures that the best answers are prominently visible.
To enforce this rule will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
Browser Support
- Chrome
- Safari
- FireFox
- Opera
- Internet Explorer 10+
- Internet Explorer 9 (graceful, without transitions + classlistp)
- graceful, without transitions
- you need to polyfill classlist (https://github.com/eligrey/classList.js/)