lory.js

Touch enabled lean slider using vanilla JavaScript & latest technologies without any compromises for fallbacks.

##Install with node

npm install --save lory

var lory = require('lory');

##Install with bower

bower install lory --save

##Prerequisited markup

<div class="slider js_simple simple">
    <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

  .frame {
        position: relative;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .slides {
        display: inline-block;
    }

    li {
        position: relative;
        display: inline-block;
    }

Integration

    <script>
        'use strict';

        document.addEventListener('DOMContentLoaded', function() {
            var simple = document.querySelector('.js_simple');

            lory(simple, {
                // options going here
            });
        });
    </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>

##Options

slidesToScroll	slides scrolled at once	default: 1
slideSpeed	time in milliseconds for the animation of a valid slide attempt	default: 400
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: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'
rewind	if slider reached the last slide, with next click the slider goes back to the startindex.	default: false

##Callbacks

beforeInit:	executed before initialisation (first in setup function)
afterInit:	executed after initialisation (end of setup function)
beforePrev:	executed on click of prev controls (prev function)
beforeNext:	executed on click of next controls (next function)
beforeTouch:	executed on touch attempt (touchstart)
beforeResize:	executed on every resize event

Browser Support

• Chrome
• Safari
• FireFox
• Opera
• Internet Explorer 10+

Copyright

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