Skip to content

Latest commit

 

History

History
363 lines (295 loc) · 9.11 KB

README.md

File metadata and controls

363 lines (295 loc) · 9.11 KB

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

Touch enabled minimalistic slider written in vanilla JavaScript.

license npm

build code climate devDependencies js-standard-style

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

Sauce Test Status

Download

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

Install with node:

npm install --save 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:

npm install

// To start the development server run:

npm start

// 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="js/jquery.lory.min.js"></script>
<script>
    'use strict';

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

Integration of multiple sliders on one page

<script src="js/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
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
on.lory.destroy fires when the slider instance gets destroyed

Browser Support

  • Chrome

  • Safari

  • FireFox

  • Opera

  • Internet Explorer 10+

  • Internet Explorer 9 (graceful, without transitions + classlistp)

Copyright

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