Please visit: https://loryjs.github.io/lory/

Touch enabled minimalistic slider written in vanilla JavaScript.

lory is released under the MIT license & supports modern environments. There is also a prebundled CDN version which you can use.

yarn add lory.js

import { lory } from 'lory.js';

document.addEventListener('DOMContentLoaded', () => {
    const slider = document.querySelector('.js_slider');

    lory(slider, {
        // options going here
    });
});

var lory = require('lory.js').lory;

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

    lory(slider, {
        // options going here
    });
});

bower install lory --save

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

// To install dev dependencies run:

yarn install

// To start the karma tests locally run:

yarn run karma-local

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

/**
 * (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>
<script>
    'use strict';

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

        lory(slider, {
            // options going here
        });
    });
</script>

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

    $(function() {
        $('.js_slider').lory({
            infinite: 1
        });
    });
</script>

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

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.

• 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 © 2015 Maximilian Heinz, contributors. Released under the MIT License