Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loryjs/lory
☀ Touch enabled minimalistic slider written in vanilla JavaScript.
https://github.com/loryjs/lory
Last synced: 28 days ago
JSON representation
☀ Touch enabled minimalistic slider written in vanilla JavaScript.
- Host: GitHub
- URL: https://github.com/loryjs/lory
- Owner: loryjs
- License: mit
- Created: 2015-03-15T17:28:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T23:15:20.000Z (over 1 year ago)
- Last Synced: 2024-05-19T03:12:00.557Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://loryjs.github.io/lory/
- Size: 2.37 MB
- Stars: 2,273
- Watchers: 58
- Forks: 246
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - loryjs/lory - ☀ Touch enabled minimalistic slider written in vanilla JavaScript. (JavaScript)
- awesome-stars - lory - ☀ Touch enabled minimalistic slider written in vanilla JavaScript. (HTML)
- awesome-stars - lory
- awesome-stars - lory
- awesome-stars - loryjs/lory - ☀ Touch enabled minimalistic slider written in vanilla JavaScript. (JavaScript)
- awesome-stars - loryjs/lory - ☀ Touch enabled minimalistic slider written in vanilla JavaScript. (others)
README
Please visit: [http://loryjs.github.io/lory/](http://loryjs.github.io/lory/ 'lory')
> Touch enabled minimalistic slider written in vanilla JavaScript.
[](https://raw.githubusercontent.com/loryjs/lory/master/LICENSE)
[](https://www.npmjs.com/package/lory.js)
[](https://cdnjs.com/libraries/lory.js/)
[](https://www.jsdelivr.com/package/npm/lory.js)
[](https://travis-ci.org/loryjs/lory)
[](https://david-dm.org/loryjs/lory#info=devDependencies&view=table)
[](https://github.com/feross/standard)
[](https://gitter.im/loryjs/lory?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
## 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.js
```
## Consume it as an ES2015 module:
```js
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:
```js
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:
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 build
```
## Run tests
```
// To install dev dependencies run:
yarn install
// To start the karma tests locally run:
yarn run karma-local
```
## Prerequisited markup
```html
```
## Prerequisited css
```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
```js
'use strict';
document.addEventListener('DOMContentLoaded', function() {
var slider = document.querySelector('.js_slider');
lory(slider, {
// options going here
});
});
```
## Integration as a jQuery Plugin
```js
'use strict';
$(function() {
$('.js_slider').lory({
infinite: 1
});
});
```
## Integration of multiple sliders on one page
```javascript
'use strict';
document.addEventListener('DOMContentLoaded', function() {
Array.prototype.slice.call(document.querySelectorAll('.js_slider')).forEach(function (element, index) {
lory(element, {});
});
});
```
# Public 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
## Options
slidesToScroll
slides scrolled at once
default: 1
infinite
like carousel, works with multiple slides. (do not combine with rewind)
default: false (number of visible slides)
enableMouseEvents
enabled mouse events
default: false
rewind
if slider reached the last slide, with next click the slider goes back to the startindex. (do not combine with infinite)
default: false
rewindPrev
if slider is on the first slide, with prev click the slider goes to the last slide. (do not combine with infinite)
default: false
slideSpeed
time in milliseconds for the animation of a valid slide attempt
default: 300
rewindSpeed
time in milliseconds for the animation of the rewind after the last slide
default: 600
snapBackSpeed
time for the snapBack of the slider if the slide attempt was not valid
default: 200
ease
cubic bezier easing functions: http://easings.net/de
default: 'ease'
initialIndex
the slide index to show when the slider is initialized
default: 0
classNameFrame
class name for slider frame
default: 'js_frame'
classNameSlideContainer
class name for slides container
default: 'js_slides'
classNamePrevCtrl
class name for slider previous control
default: 'js_prev'
classNameNextCtrl
class name for slider next control
default: 'js_next'
classNameDisabledPrevCtrl
class name for slider previous control then disabled
default: 'disabled'
classNameDisabledNextCtrl
class name for slider next control then disabled
default: 'disabled'
## Events
before.lory.init
fires before initialisation (first in setup function)
after.lory.init
fires after initialisation (end of setup function)
before.lory.slide
fires before slide change | arguments: currentSlide, nextSlide
after.lory.slide
fires after slide change | arguments: currentSlide
before.lory.destroy
fires before the slider instance gets destroyed
after.lory.destroy
fires after the slider instance gets destroyed
on.lory.resize
fires on every resize event
on.lory.touchstart
fires on every slider touchstart event
on.lory.touchmove
fires on every slider touchmove event
on.lory.touchend
fires on every slider touchend event
## 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](http://stackoverflow.com/questions/tagged/lory) where maintainers are looking at questions tagged with `loryJS`.
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/)
## Copyright
Copyright © 2015 Maximilian Heinz, contributors. Released under the MIT License