lory-lesara.js

NOTICE: This is a minimally patched version of the original lory.js v 2.2.1. The only addition here is an optional switch forceIndexUpdate that is false by default and can be set to true. If set to true, index will also be updated when the offset of the nextIndex is outside the range of the maxOffset (which can happen when the total number of slides is not an exact multiple of slidesToScroll). This way we can have a slideshow that slides all slides in view (not only a fixed amount of slides) which makes it more responsive-design-friendly, and have the "next"-arrow/button disappear when the end of the slides is reached and we do not want to have endless slides. This was not possible with the original version of lory.js. Since we'll use it on https://www.lesara.de, the name of this patched fork is lory-lesara.js.

The reason for this fork is that we want to use Lory.js (with this additional option) as an npm package and the pull request I created on the original github repository hasn't yet been processed. I will probably not maintain this package any further since it already does what it should do. But please feel free to contact me in case of questions.

Please visit: http://meandmax.github.io/lory/ for the original version Please visit: http://RSeidelsohn.github.io/lory-lesara/ for the forked and minimally enhanced version

Touch enabled minimalistic slider written in vanilla JavaScript.

Download

lory-lesara is released under the MIT license & supports modern environments. There is also a prebundled CDN version of the original (unpatched) lory.js which you can use:

Vanilla JavaScript: https://cdnjs.cloudflare.com/ajax/libs/lory.js/2.2.0/lory.min.js

jQuery plugin: https://cdnjs.cloudflare.com/ajax/libs/lory.js/2.2.0/jquery.lory.min.js

Install with node:

npm install --save lory-lesara.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-lesara --save

Local development

// To install dev dependencies run:

npm install

// To start the development server run:

npm run dev

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

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

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