☀ Touch enabled minimalistic slider written in vanilla JavaScript.
HTML JavaScript CSS
meandmax Merge pull request #742 from gglnx/fix-dependencies
Move karma-webpack to dev dependencies
Latest commit 5c9405f Jun 29, 2018
Failed to load latest commit information.
.vscode chore: add workspace settings for vscode Feb 20, 2018
bin chore: optimize webpack console output & config Aug 26, 2016
dist Merge branch 'master' of https://github.com/benmerckx/lory into benme… Jun 4, 2018
src Merge branch 'master' of https://github.com/benmerckx/lory into benme… Jun 4, 2018
static fix: padding for demo page May 30, 2018
test fix: remove test for onResize because its not included in the public api Jun 4, 2018
.babelrc chore(babel update): update to babel 6.* with presets + add commitizen Nov 4, 2015
.editorconfig Initial commit: first version of lory Mar 15, 2015
.eslintignore update run script for travis Sep 26, 2015
.eslintrc feat: update all deps of greenkeeper, build new dist, demo files Mar 30, 2016
.gitignore feat: add yarn-error.log to gitignore May 30, 2018
.npmignore feat: add .npmignore to only have needed files in package May 30, 2018
.npmrc chore(package.json): add "save-exact" option to npmrc Nov 14, 2015
.nvmrc chore: update node version Nov 19, 2017
.travis.yml fix: use the updated yarn version in travis Nov 19, 2017
LICENSE optimized default transistions, add public api to documentation, udpa… Mar 21, 2015
README.md docs: add correct sauce labs badge May 27, 2018
bower.json fix: update bower.json Sep 29, 2016
index.html fix: path to tests screenshot May 30, 2018
local.karma.conf.js tests: update karma dependencies, reduce local test browsers to firef… Nov 23, 2017
nodemon.json chore: add nodemon config file Aug 21, 2016
package.json chore(package.json): move karma-webpack to dev dependencies Jun 18, 2018
saucelabs.karma.conf.js refactor: changes after turning autofixOnSave on Feb 20, 2018
travis.karma.conf.js chore: only test saucelabs on master, otherwise only phantomjs Aug 26, 2016
webpack.config.base.js refactor: changes after turning autofixOnSave on Feb 20, 2018
webpack.config.dev.js fix: update to get webpack 2 to work Nov 19, 2017
webpack.config.prod.js chore: remove not used HTMLWebpackPlugin and remove DedupePlugin Feb 20, 2018
yarn.lock chore: update critical dependencies Feb 20, 2018


Please visit: http://meandmax.github.io/lory/

Touch enabled minimalistic slider written in vanilla JavaScript.

license npm CDNJS jsDelivr Hits

build devDependencies js-standard-style

Join the chat at https://gitter.im/meandmax/lory semantic-release Commitizen friendly

Build Status


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:

    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:


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

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

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;


<script src="js/lory.min.js"></script>
    'use strict';

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

        lory(slider, {
            // options going here

Integration as a jQuery Plugin

<script src="dist/jquery.lory.js"></script>
    'use strict';

    $(function() {
            infinite: 1

Integration of multiple sliders on one page

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


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


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


Copyright © 2015 Maximilian Heinz, contributors. Released under the MIT License